Why is my bootstrap navbar not displaying inline?

Question

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

    


        
                      

              相关标签:
       
      

Answer 1

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:

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

You can make an inline navbar easily with this custom CSS class:

Css:

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

Now use it in your Html:

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

Answer 3

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

The most direct override for this use case:

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

Answer 4

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

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

Answer 5

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

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

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

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

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