我正在尝试执行一个基本的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).为什么导航栏中的项目彼此堆叠在一起,而不是彼此并排？
解决方法
您正在使用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>
