Why is my bootstrap navbar not displaying inline?

Question

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

    


        
                      

              相关标签:
       
      

Answer 1

just simply add this into your CSS and get the elements in one line

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

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

Answer 2

I was facing the same problem. Try this:

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

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

It worked for me

Answer 3

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

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

So if your nav class is like that

change lg to sm or if -sm then change into -lg

Answer 5

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:

.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