导航栏。文本内嵌水平规则并在其顶部显示？

Question

我一直试图获得一个带有文本内联的导航栏，其中包含水平规则＆amp;水平规则之上的文本。

我对css和bootstrap很新，并且想知道是否有可能让它居中并跨越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。