为什么我的 bootstrap 导航栏不显示内联？

Question

这是我使用 bootstrap 的 html（我确定 bootstrap 安装正确）

 <nav class="navbar navbar-inverse">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand">Rebar</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

当它显示时，三个链接被显示为块元素。

原文由 Nash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是因为在 Bootstrap 中，li 的 css 是这样的：

 .nav>li {
  position: relative;
  display: block;
}

但对我来说，菜单似乎正确显示。查看片段，但只能在整页上查看。在移动设备上，它会表现得像一个块元素，因为屏幕没有足够的空间来显示它们。

编辑：更新了 snippit 以按要求工作（请参阅此答案下方的评论）

 .navbar .container-fluid>.navbar-header {
  float: left;
  margin-right: 10px;
}
.navbar .navbar-nav {
  float: left;
  margin: 5px;
}
.nav>li {
  float: left;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand">Rebar</a>
    </div>

    <div style="display: inline-block;">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

原文由 Thomas Theunen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

目前在 Bootstrap 4 上。在我的生态系统中，flex 布局似乎也是默认的柱状布局。

此用例的最直接覆盖：

 .navbar-nav {
    flex-direction: row;
}

原文由 beauXjames 发布，翻译遵循 CC BY-SA 3.0 许可协议