引导导航栏列表堆叠而不是靠

问题描述：

<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 4（在Codepen中）并且导航栏已更改。如果你想要一个简单的水平（非塌陷），您需要包括navbar-toggleable-xl因为导航栏不响应默认情况下（垂直堆叠的）..

<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

希望我能接受一个以上的答案，因为他们都是有用的。感谢链接到alpha文档（我正在查看以前版本的文档）。演示也非常有帮助！ – RubyNoob

答

您的代码是正确的，但是您需要的Bootstrap版本是3.3.7版本。看起来您正试图在您的Codepen中调用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>

谢谢你。很有用！ – RubyNoob

引导导航栏列表堆叠而不是靠

相关推荐