Question

我开始使用Boostrap作为移动应用程序，我使用的是AngularJs和UI-Bootsrap（不是JQuery）。我正在尝试使用4个glyphicons创建一个固定到底部的导航栏。问题是，对于小屏幕，项目显示为列表，见下文：

就我而言，我会在导航栏中始终显示项目，如下所示：

在这里查看我的代码：

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

如何获取引导导航栏的项目始终内联

1 个答案: