Angularjs 如何始终在线获取引导navbar的项

我从一个移动应用的Boostrap开始，我使用的是AngularJs和UI Bootsrap，而不是JQuery。我正在尝试创建一个导航栏，它固定在底部，有4个图标。问题在于，在小屏幕上，项目显示为列表，请参见以下内容：

在我的情况下，我希望在navbar中始终以内联方式显示项，如下所示：

在这里查看我的代码：

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

有人能告诉我怎么做吗

提前感谢

删除导航类

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