загрузочная сетка не работает

Question

На изображении справа от моего сайта. Некоторые элементы из загрузочной сетки.

<div class="container"> 
    <div class="col-md-12"> 
    <div class="row"> 
     <a href="#" class="logo">First</a> 
     <nav class="main_menu clearfix"> 
     <button class="main_menu_button hidden-md hidden-lg"><i class="fa fa-bars"></i></button> 
     <ul> 
      <li class="active"><a href="#"></a></li> 
      <li><a href="#"></a></li> 
      <li><a href="#"></a></li> 
      <li><a href="#"></a></li> 
      <li><a href="#"></a></li> 
     </ul> 
     </nav> 
    </div> 
    </div> 
</div> 

Почему элемент nav может выйти из сетки загрузки? Моя основная часть - серый

Answer 1

Не совсем уверен, что не так с вашей разметкой или стилем, это трудно понять из данного контента, но вы должны поставить .col-md-12 внутри .row не наоборот.

Вот некоторые примеры: https://getbootstrap.com/examples/grid/

Answer 2

Я бы определенно ознакомиться с тем, как HTML и CSS классы должны быть структурированы с начальной загрузкой. Вам нужно будет начать с класса контейнера (например, class = "container"). Внутри контейнера идут строки (class = "row"), а внутри строк - ваши столбцы (например, class = "col-md-12").

Заканчивать эту страницу: http://getbootstrap.com/css/

Если вы хотите построить СЧА в загрузчике вам не обязательно нужно заново изобретать колесо и могут использовать их NavBar Шаблон: http://getbootstrap.com/examples/navbar/

Возможно что-то как это будет работать для вас:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <a href="#" class="logo">First</a> 
 
     </div> 
 
     <div class="col-xs-9"> 
 
      <nav class="main_menu clearfix"> 
 
      <button class="main_menu_button hidden-md hidden-lg">menu</button> 
 
      <ul> 
 
       <li class="active"><a href="#"></a></li> 
 
       <li><a href="#"></a></li> 
 
       <li><a href="#"></a></li> 
 
       <li><a href="#"></a></li> 
 
       <li><a href="#"></a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>