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

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

Answer 1

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

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

但对我来说菜单似乎正确显示。查看片段，但只能在整页上查看。在移动设备上，它的行为类似于 block 元素，因为屏幕没有足够的空间来显示它们。

编辑:更新了代码片段以按要求工作(请参阅此答案下方的评论)

.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>