Bootstrap 导航栏列表是堆叠的而不是并排的
Posted
技术标签:
【中文标题】Bootstrap 导航栏列表是堆叠的而不是并排的【英文标题】：Bootstrap nav bar list is stacked rather than alongside 【发布时间】：2017-07-01 19:53:14 【问题描述】：我正在尝试执行一个基本的 Bootstrap 导航栏示例：
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</body>
查看CodePen（已安装 Bootstrap）中发生的情况。为什么导航栏中的项目相互堆叠，而不是并排放置？
【问题讨论】：
【参考方案1】：您正在使用 Bootstrap 4（在 Codepen 中）并且导航栏已更改。如果你想要一个简单的水平（非折叠）你需要包含navbar-toggleable-xl，因为默认情况下导航栏是垂直堆叠的..
4.0.0 更新 navbar-toggleable-* 已更改为 navbar-expand-*
对于原始问题：
<nav class="navbar navbar-light navbar-toggleable-xl bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
演示：http://www.codeply.com/go/TVDW57B4SL
Read more in the docs
【讨论】：
【参考方案2】：您的代码是正确的，但是您需要的 Bootstrap 版本是 3.3.7 版本。您似乎正在尝试在 Codepen 中调用较新版本的 Bootstrap。
这是您使用旧版 Bootstrap 的相同代码：
https://codepen.io/anon/pen/rjPazv
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
【讨论】：
以上是关于Bootstrap 导航栏列表是堆叠的而不是并排的的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4将两个导航栏菜单按钮对齐到右侧[重复]