Html 为什么我的引导导航栏不在线显示？

这是我使用引导的html（我确信引导安装正确）

---

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

这是因为在引导中，li的css如下所示：

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

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

编辑：更新snippit，使其按要求工作（请参见本答案下面的注释）

.navbar.container fluid>.navbar标题{
浮动：左；
右边距：10px；
}
.navbar.navbar导航{
浮动：左；
保证金：5px；
}
.nav>li{
浮动：左；
}

如果你想这样

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

切换导航

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

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

---

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

您可以使用此自定义

CSS

类轻松创建内联

navbar

：

Css:

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

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

现在在Html:

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

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

。。。。。

......

.....

当前在引导程序4上。在我的生态系统中，flex布局在默认情况下也是柱状的

此用例的最直接覆盖：

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

---

我也面临同样的问题。 试试这个：

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

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

---

这对我来说很有效

目前在Bootstrap 4上，内联导航栏可以通过在列表元素上添加类“导航项”和在标签上添加类“导航链接”来实现，如下所示：

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

刚刚遇到了BS4的这个问题。了解到我需要将

navbar扩展lg

类添加到我的nav中

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

---

为了便于修改，我在下面的位置添加了

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>

对于响应性收拢和配色方案类，导航栏需要一个带有.navbar expand{-sm |-md |-lg |-xl}的包装.navbar

如果你的导航课是这样的

---

将lg更改为sm或if-sm，然后更改为-lg

只需将其添加到CSS中，并将元素放在一行中即可

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

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

---

我一直在测试手机。。。所以我想这就是问题所在。有没有办法强制它在移动设备上以内联方式显示？你可以编写css媒体查询来更改它在不同大小和屏幕上的外观。@nash我在文章中用一个媒体查询更新了这个例子，并对css进行了一些更改。也许这并不是最好的方法，但它应该会让你走上正轨。在遵守框架规则方面，这是最好和正确的答案。这对我来说很有魅力。另一个答案也很可能起作用。然而，这是我选择的道路。