ブートストラップNavbar、折りたたまれたメニューの1つの行に複数のアイコン

Question

私は、左側に項目があり、右側に.navbar-rightを持つアイコンがいくつかあります。見た目はワイドスクリーンで見つけることができますが、折りたたまれたアイコンは展開されたメニューで一列に並んでいます。小さな画面で拡大表示されたメニューの3つのアイコンを同じ行に表示したいのですが、どのようなものが表示されるのですか？here

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header" style="padding-left: 10px"> 
      <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#the-menu"> 
       <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="the-menu"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/index.html">Home</a></li> 
       <li><a href="/issues.html">Issues</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-home"></span></a></li> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-log-in"></span></a></li> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-log-out"></span></a></li> 
      </ul> 

     </div> 

    </div> 
</nav> 

電話機でメニューを展開すると、3つのアイコンのそれぞれがそれぞれ1行ずつ表示され、同じ行に表示されます。各アイコンには異なるリンクがあります。

Answer 1

あなたは小さな画面上.nav>lidisplay: inline-blockにを無効にするために、いくつかのCSSを追加することができます。..

@media (max-width: 768px) { 
    .nav>li { 
     display: inline-block; 
     padding-right: 0; 
    } 
} 

http://www.bootply.com/9Gi06pDJ9d