导航栏内容区域下降

Question

我正在尝试制作响应式网站。一切都很好，但我有一个问题。当我得到较小的窗口时，内容区域将落在导航栏的下方。

我想在左侧保留导航栏，在右侧保留内容。并排。我该如何解决？

这是我的密码

 /*Navbar*/

div.navbar-inside a{
    text-decoration: none;
    font-family: "bocek-bold";
    background-color: #f1f1f1;  
    display: block;
    padding: 8.8px 14.2px;
    text-decoration: none;
    border-bottom: 1px solid #803104;;
    color: #f75c03;
}

div.navbar-inside {
    list-style-type: none;
    display: table-row;       
    margin: 15px;
    padding: 0;
    width: 144px; 
    font-family: "bocek-bold";
    font-size: 1.1em
}

div.navbar-inside a:hover {
    background-color: #db995a;
    color: #654236;
}


    /*Content*/

.content-inside { 
    font-family: "bocek-bold";
    font-size: 1.4em;
    height: auto;
    margin-left: 70px;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    }

<!--Middle area. Navbar, content-->

  <div class="row">

    <!--Navbar-->

    <div class="col-xs-0 col-md-2 navbar-inside" style="background-color:rgb(77, 58, 95);" >
        <div class="col-xs-0 col-sm-4 col-lg-2 navbar-inside">
            <a href="index.html">Anasayfa</a>
            <a href="hakkimizda.html">Hakkımızda</a>
            <a href="kadromuz.html">Kadromuz</a>
            <a href="referanslar.html">Referanslar</a>
            <a href="iletisim.html">İletişim</a>
        </div>
    </div>

    <!--Content-->

    <div class="col-xs-12 col-md-10 content-inside"  style="background-color: rgb(43, 189, 226);">
        <p>
          CONTENTCONTENTCONTENTCONTENTCONTENT 
        </p>
    </div>
  </div>

Answer 1

问题是您要在内容中添加左边距。这样，行内的空间（12列）将获得2列用于导航栏和10列+左边距内容。用导航栏计数时，该行中仅可容纳10列的空间（而不是10 +左边的空白），内容将无法容纳在那里并下降。