Question

我试图执行一个基本的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）中发生了什么。为什么导航栏中的项目彼此堆叠在一起，而不是彼此并排坐着？

Answer 1

您正在使用Bootstrap 4（在Codepen中）并且导航栏已更改。如果您想要一个简单的水平（非折叠），则需要包含value.toString()，因为默认情况下导航栏是垂直堆叠的。

4.0.0更新 navbar-toggleable-xl已更改为 navbar-toggleable-*

原始问题：

navbar-expand-*

演示：http://www.codeply.com/go/TVDW57B4SL

Read more in the docs

Answer 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导航栏列表是堆叠而不是旁边

2 个答案: