Bootstrap 导航栏列表是堆叠的而不是并排的答案

【问题标题】：Bootstrap nav bar list is stacked rather than alongsideBootstrap 导航栏列表是堆叠的而不是并排的
【发布时间】：2017-07-01 19:53:14
【问题描述】：

我正在尝试执行一个基本的 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）中发生的情况。为什么导航栏中的项目相互堆叠，而不是并排放置？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您正在使用 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>

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

Read more in the docs

【讨论】：

【解决方案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>

【讨论】：