我正在尝试执行基本的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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句