我曾尝试添加 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,因此如果有所不同,事件链接会自动更新。不确定如何处理 - 任何想法将不胜感激。
最佳答案
因为 li
元素是 block 级的(display :block
是通过 Bootstrap 的 CSS 应用的),您需要做的就是添加 text-align:在
:ul
上居中
.navbar-nav {
text-align: center;
}
我已经创建了一个更新的 fiddle 来展示这个 here .
不确定 ScrollSpy 效果,但我假设您可以简单地将链接集合作为参数传递给参数。
希望对您有所帮助! :)
关于html - Bootstrap : centering content in Nav and changing default beavior on smaller screens,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43173897/