为什么我的引导导航栏不显示内联？答案

【问题标题】：Why is my bootstrap navbar not displaying inline?为什么我的引导导航栏不显示内联？
【发布时间】：2022-01-28 20:50:42
【问题描述】：

这是我使用 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>

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

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

但对我来说，菜单似乎正确显示。请参阅 sn-p，但仅在整页上。在移动设备上，它的行为类似于块元素，因为屏幕没有空间内联显示它们。

编辑：更新了代码片段以按要求工作（请参阅此答案下方的 cmets）

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

【讨论】：

我一直在移动测试...所以我想这就是问题所在。有没有办法强制它在移动设备上内联显示？
您可以编写 css 媒体查询来更改它在不同尺寸和屏幕上的外观。
@nash 我更新了帖子中的示例，其中包含一些 css 更改的媒体查询。可能不是最好的方法，但它应该能让你上路。

【解决方案2】：

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

这个用例最直接的覆盖：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这也解决了我使用 Bootstrap 5 的问题 - 谢谢！
也为我工作，但这涉及建立断点。有没有“更清洁”的方式？

【解决方案4】：

我并不是说其他答案在任何方面都不正确，但完成原始问题真正需要的是子主题的 CSS 文件中的以下条目：

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

需要注意的是，li 之前的类会根据主题外观部分的选择和其他因素而有所不同。例如，开箱即用的类应该是 .menu.nav li

【讨论】：

【解决方案5】：

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

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

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

它对我有用

【讨论】：

在遵守框架规则方面的最佳和正确答案。这对我来说就像一个魅力。另一个答案可能也有效。然而，这是我选择的道路。

【解决方案6】：

如果你想这样 check this 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>

【讨论】：

【解决方案7】：

目前在 Bootstrap 4 上，可以通过在列表元素上添加类“nav-item”和在标签上添加类“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>

【讨论】：

【解决方案8】：

导航栏需要一个带有 .navbar-expand{-sm|-md|-lg|-xl} 的包装 .navbar 用于响应式折叠和配色方案类。

如果你的导航类是这样的

把lg改成sm或者如果-sm就改成-lg

【讨论】：

【解决方案9】：

您可以使用此自定义 CSS 类轻松创建内联 navbar：

CSS：

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

现在在你的 Html:

中使用它

.....
<ul class="nav navbar-nav inline-navbar">
   ......
</ul>
.....

【讨论】：

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

【讨论】：

【解决方案11】：

只需将其添加到您的 CSS 中并在一行中获取元素

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

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

【讨论】：

【解决方案12】：

在下面的 sn-p 中，突出显示的行曾经是 <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>

【讨论】：