html - Bootstrap : centering content in Nav and changing default beavior on smaller screens

Question

我曾尝试添加 float 并使用一些 Bootstrap 类来尝试使其正常工作，但均无济于事。不知道我错过了什么。我想让 ul 或所有元素居中。下面是导航标记:

http://jsfiddle.net/bdd9U/1489/

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <h1>Home</h1>
</div>

此外，在较小的屏幕上，导航的默认行为是相互堆叠。我想让事件链接是唯一显示的链接(或者可能与另一个链接一起显示)，但它可以水平滚动以显示其他链接。我正计划使用 Scrollspy，因此如果有所不同，事件链接会自动更新。不确定如何处理 - 任何想法将不胜感激。

Answer 1

因为 li 元素是 block 级的(display :block 是通过 Bootstrap 的 CSS 应用的)，您需要做的就是添加 text-align:在 ul 上居中:

.navbar-nav {
  text-align: center;
}

我已经创建了一个更新的 fiddle 来展示这个 here .

不确定 ScrollSpy 效果，但我假设您可以简单地将链接集合作为参数传递给参数。

希望对您有所帮助! :)