html - 导航栏。文本与水平线内联并位于水平线之上？

Question

我一直在尝试获得一个导航栏，该导航栏的文本内嵌有一条水平线，并且文本位于水平线之上。

我对 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 中即可。分区。

我下面的示例有一些用于导航的 CSS，因此它将内联显示。默认 <li>元素设置为 display: block;并将占据其父元素的整个宽度。基本上，它们最终会堆叠起来。

唯一需要注意的是第一列中的文本，并试图将其与边框/水平规则垂直对齐。有几种方法可以做到这一点。在我的示例中，我选择将默认值加倍 line-height Bootstrap 使用的。

<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 .