为什么我的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>

当它显示三个链接时显示为块元素.

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>

Answer 2

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

此用例的最直接替代：

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

Answer 3

刚用 BS4 遇到了这个问题。了解到我需要将navbar-expand-lg课程添加到我的导航中。

<nav class="navbar navbar-expand-lg">