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

Answer 1

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

.nav>li {
  position: relative;
  display: 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>

- Thomas Theunen

---

我一直在移动设备上进行测试...所以我猜那就是问题所在。有没有办法强制在移动设备上内联显示？ - Nash

你可以编写CSS媒体查询来改变在不同尺寸和屏幕上的外观。 - Ekin

@nash 我在我的帖子中更新了示例，使用媒体查询进行了一些CSS更改。可能不是最好的方法，但应该能够让你入门。 - Thomas Theunen

Answer 2

目前使用的是Bootstrap 4。在我的环境中，flex布局默认为列式布局。

针对这种情况最直接的覆盖方式是：

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

- beauXjames

Answer 3

我遇到了BS4的这个问题。发现我需要在我的导航栏中添加navbar-expand-lg类。

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

- dmikester1

---

这对我使用 Bootstrap 5 也解决了问题 - 谢谢！ - Union In Design

对我也起作用了，但这涉及到建立断点。有没有更“简洁”的方法？ - 101is5

Answer 4

我也遇到了同样的问题。 尝试这个：

.navbar-nav {
  display: inline-block;
}

.navbar-nav>li {
   display: inline-block;
}

它对我有效

- Amol Borgaonkar

---

在遵守框架规则的前提下，最好和正确的答案。这对我来说非常有效。其他答案可能也能起作用。然而，这是我选择的路线。 - user2521387

Answer 5

我并不是说其他答案有任何错误，但是为了实现原始问题，只需要在子主题的CSS文件中添加以下内容：

.nav.navbar-nav li {
    float: left;
}

需要注意的是，li之前的class(s)会根据主题中外观部分的选择和其他因素而有所不同。例如，刚开始时，class可能是.menu.nav li。

- Rick_P

Answer 6

导航栏需要使用 .navbar 包裹，并添加 .navbar-expand{-sm|-md|-lg|-xl} 以实现响应式折叠和颜色方案。

如果您的导航类似于这样

将 lg 更改为 sm，或者如果为 -sm，则更改为 -lg。

- Israr Awan

Answer 7

如果您想这样做，可以查看此DEMO: 检查此DEMO

<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="top_navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Link 1</a>
                </li> 
                <li>
                    <a href="#">Link 2</a>
                </li>
                <li>
                    <a href="#">Link 3</a>
                </li>

            </ul>

        </div>
    </div>
</nav>

- sheshadri

Answer 8

目前在Bootstrap 4上，内联导航栏可以通过在列表元素上添加"class = nav-item"和在a标签上添加"class = nav-link"来实现：

<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 class="nav-item">
                   <a class= "nav-link" href="#">Link</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>
        </div>
    </div>
</nav>

- tomb

Answer 9

在下面的代码片段中，之前高亮显示的行是<div class="nav navbar-nav">。在这种情况下，只需删除“navbar-nav”就可以解决我的问题。

<nav class="navbar fixed-top" id="homehead">
        <img class="navbar-brand" src="" height=50 width=50 alt="">

THIS LINE-> <div class="nav">

            <a class="nav-item nav-link" href="">Link1<span
                    class="sr-only"></span></a>
            <a class="nav-item nav-link" href="">Link2</a>
            <a class="nav-item nav-link" href="">Link3</a>
            <a class="nav-item nav-link" href="">Link4</a>
        </div>

- 101is5

Answer 10

为了快速修改，我在下面的位置添加了style="display: inline"：

    <div class="collapse navbar-collapse" id="navbarSupportContent" style="display: inline">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#" onclick="toggleContent('single')">One Line Param</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="#" onclick="toggleContent('multi')">Multi Line Param</a>
            </li>

        </ul>
    </div>

- yu yang Jian