自舉網格不工作

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

不確定您的標記或樣式有什麼問題，從給定內容中很難理解，但您應該在.row之內放置.col-md-12而不是其他方式。

下面是一些例子：https://getbootstrap.com/examples/grid/

Answer 2

我肯定會用怎樣的HTML和CSS類應該有引導結構化熟悉。你將需要從一個容器類開始（例如class =「container」）。在容器中放入行（class =「row」），行內是你的列（例如class =「col-md-12」）。

看看這個頁面：http://getbootstrap.com/css/

如果您正在尋求建立一個導航出引導你不一定需要重新發明輪子，可以使用他們的導航欄模板：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>