導航欄。文本與水平線上的內容一致嗎？

Question

我一直在試圖讓一個導航條帶有橫向規則&文本的文本在水平線上。

我敢新的CSS和引導，並想知道是否有可能有它爲中心，跨越8-10列

東西有點像這個

<div class="row"> 
<div class="col-md-1" style=""></div> 
<div class="col-md-1" style="">TEXT</div> 
<div class="col-md-8" style="">horizontal rule with text on top</div> 
<div class="col-md-2" style=""></div> 

Answer 1

你越來越近了。

我會使用偏移類而不是空列。除此之外，您只需將您的導航放在您的.col-md-8 DIV中即可。

我下面的例子有一些CSS導航，所以它會內聯顯示。默認情況下，<li>元素設置爲display: block;，並佔用其父元素的整個寬度。基本上，他們會結束堆疊。

唯一值得注意的主要問題是第一列中的文本，並嘗試將其與邊界/水平線垂直對齊。這有幾個方法。在我的例子中，我選擇了Bootstrap使用的默認line-height的兩倍。

<div class="container"> 

    <div class="row"> 

    <div class="callout col-md-1 offset-md-1"> 
     TEXT 
    </div> 

    <div class="col-md-8"> 

     <nav class="primary-nav"> 

     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ul> 

     </nav>  

    </div><!-- .col-md-8 --> 

    </div><!-- .row --> 

</div><!-- .container --> 

ul, li { 
    margin: 0; 
    padding: 0; 
} 
.callout { 
    line-height: 2.85714286; /* twice Bootstrap's line-height */ 
    text-align: center; 
} 
.primary-nav { 
    border-bottom: 1px solid #333; 
} 
.primary-nav li { 
    display: inline-block; 
    margin: 0 10px; 
} 

的JSFiddle。