如何獲得bootstrap導航欄的項目始終爲inline

Question

我開始使用Boostrap作爲移動應用程序，我正在使用AngularJs和UI-Bootsrap（而不是JQuery）。我正在嘗試創建一個固定在底部的導航欄，並帶有4個圖標。問題是，有一個小屏幕，項顯示爲列表，見下​​圖：

在我的情況，我會在導航欄像這樣總是內嵌顯示項目：

看我的代碼在這裏：

<footer> 
     <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav navbar-center"> 
       <!-- c'est par cette syntaxe que nous chargeons des icônes avec Bootstrap --> 
        <li><a><span class="glyphicon glyphicon-trash"></span> Trash</a></li> 
        <li><a><span class="glyphicon glyphicon-home"></span> Home</a></li> 
        <li><a><span class="glyphicon glyphicon-camera"></span> Camera</a></li> 
        <li><a><span class="glyphicon glyphicon-ice-lolly-tasted"></span> Ice cream</a></li> 
       </ul> 
      </div> 
     </nav> 
    </footer> 

有人能告訴我該怎麼做嗎？

在此先感謝;）

Answer 1

刪除nav類

<footer> 
      <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
       <div class="container-fluid"> 
        <ul class="list-inline"> 
        <!-- c'est par cette syntaxe que nous chargeons des icônes avec Bootstrap --> 
         <li><a><span class="glyphicon glyphicon-trash"></span> Trash</a></li> 
         <li><a><span class="glyphicon glyphicon-home"></span> Home</a></li> 
         <li><a><span class="glyphicon glyphicon-camera"></span> Camera</a></li> 
         <li><a><span class="glyphicon glyphicon-ice-lolly-tasted"></span> Ice cream</a></li> 
        </ul> 
       </div> 
      </nav> 
     </footer>