我正在尝试执行一个基本的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>
原文地址：https://www.jb51.cc/html/225830.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
