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

Why is my bootstrap navbar not displaying inline?

提问by Nash

Here is my html using bootstrap (I'm sure bootstrap is installed correctly)

这是我使用引导程序的 html（我确定引导程序安装正确）

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

When it displays the three links are being displayed as block elements.

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

采纳答案by Thomas Theunen

This is because in Bootstrap the css for li is this:

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

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

But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.

但对我来说，菜单似乎正确显示。查看片段，但仅限于整页。在移动设备上，它将表现得像一个块元素，因为屏幕没有空间内联显示它们。

EDIT: Updated the snippit to work as requested (see comments below this answer)

编辑：更新了 snippit 以按要求工作（请参阅此答案下方的评论）

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

回答by beauXjames

Currently on Bootstrap 4. The flex layout seems to be columnar by default in my ecosystem as well.

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

The most direct override for this use case:

此用例最直接的覆盖：

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

回答by dmikester1

Just ran into this issue with BS4. Learned I needed to add navbar-expand-lgclass to my nav.

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

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

回答by Amol Borgaonkar

I was facing the same problem. Try this:

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

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

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

It worked for me

它对我有用

回答by Rick_P

I'm not saying the other answers are incorrect in any way, but all that is really needed to accomplish the original question is this entry in the subtheme's CSS file:

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

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

It should be noted that the class(s) before the li will vary depending on selections in the Appearance section of the theme and other factors. For example, right out of the box the class would have been .menu.nav li

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

回答by sheshadri

If you want like this way check this 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>

回答by RAM

You can make an inline navbareasily with this custom CSSclass:

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

Css:

css：

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

Now use it in your Html:

现在在你的Html 中使用它：

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

回答by tomb

Currently on Bootstrap 4, the inline navbar can be achieved by adding class "nav-item" on list elements and class "nav-link" on a tags like this:

目前在 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>

回答by yu yang Jian

For a quuick modify, I add style="display: inline"in the below position:

为了快速修改，我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>