如何讓Bootstrap導航欄出現在xs佈局的一行上？

我有以下Bootstrap導航欄，但是當它顯示在xs佈局中時，我希望它在一行上顯示。我如何強制它在一行上顯示而不是中斷。它顯然有足夠的空間。如何讓Bootstrap導航欄出現在xs佈局的一行上？

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Company Name</a> 
      </div>     
      <ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block"> 
       <li class="active"><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul>      
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Settings 1</a></li> 
         <li><a href="#">Settings 2</a></li> 
         <li><a href="#">Settings 3</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Settings A</a></li> 
         <li><a href="#">Settings B</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Menu 1</a></li> 
         <li><a href="#">Menu 2</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Menu A</a></li> 
         <li><a href="#">Menu B</a></li> 
         <li><a href="#">Menu C</a></li> 
        </ul>       
       </li> 
      </ul> 

      <div style="display:none" class="navbar-collapse"> 
       <p class="navbar-text fix_navbar_left_larger">Company Name</p> 
       <p class="navbar-text fix_navbar_left_xs">Company Name</p> 
       <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p> 
       <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"><a href="#"></a></p> 
       <a class="navbar-brand navbar-brand navbar-right dropdown" href="#"> 
        <span class="glyphicon glyphicon-menu-hamburger"></span> 
       </a> 
       <a class="navbar-brand navbar-brand navbar-right" href="#"> 
        <span class="glyphicon glyphicon-cog"></span> 
       </a> 
      </div>       
     </div> 
    </nav> 

    <div class="pagecontent"> 
     <p class="visible-xs-block">seen on xs screens.</p> 
     <p class="visible-sm-block">seen on sm screens.</p> 
     <p class="visible-md-block">seen on md screens.</p> 
     <p class="visible-lg-block">seen on lg screens.</p> 
    </div> 

</div>

來源

2016-04-21 Edward Tanguay

有人可以回答Bootstrap 4以及？ –