导航栏。文本是否与水平线内联，并位于水平线的顶部？

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

你已经很接近了。

我将使用offset类而不是空列。除此之外，您只需将导航放置在您的.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。