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以按要求工作（请参阅此答案下面的评论）

＆＃13;

.navbar .container-fluid>.navbar-header {
  float: left;
  margin-right: 10px;
}
.navbar .navbar-nav {
  float: left;
  margin: 5px;
}
.nav>li {
  float: left;
}

＆＃13;

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

＆＃13;

Answer 2

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

此用例的最直接覆盖：

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

Answer 3

我不是说其他答案在任何方面都是错误的，但完成原始问题所需要的只是在subtheme的CSS文件中的这一条目：

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

应该注意，li之前的类别将根据主题的Appearance部分中的选择和其他因素而变化。例如，开箱即用的课程将是.menu.nav li

Answer 4

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

Answer 5

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

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

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

它对我有用

Answer 6

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

所以，如果您的导航课是这样的

将lg更改为sm，或者将-sm更改为-lg

Answer 7

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

<强>的CSS：

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

现在在 Html：

中使用它

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

Answer 8

目前在Bootstrap 4上，可以通过添加class＆＃34; nav-item＆＃34;来实现内联导航栏。列表元素和类＆＃34; nav-link＆＃34;在这样的标签上：

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

Answer 9

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

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

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>

Answer 11

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

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

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

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

11 个答案: