Контент области падения навигационной панели - PullRequest
0 голосов
/ 29 апреля 2020

Я пытаюсь сделать адаптивный сайт. Все отлично, но у меня есть проблема. Когда я получаю меньшее окно, область содержимого падает ниже панели навигации.

Я хочу оставить панель навигации слева, а контент - справа. Бок о бок. Как я могу это исправить?

This window

turns this

Вот мои коды

 /*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>

1 Ответ

1 голос
/ 29 апреля 2020

Проблема в том, что вы добавляете поле слева в свой контент. Таким образом, пространство внутри строки (12 столбцов) получает 2 столбца для панели навигации и 10 столбцов + поле слева от содержимого. Как и в случае с панелью навигации, в строке есть только место для 10 столбцов (а не 10 + поле слева), содержимое там не помещается и уменьшается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...