导航栏。文本与水平线上的内容一致吗？

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。