Bootstrap 3 - 如何在折叠导航栏中正确显示按钮（btn-navbar）？

Question

我使用以下HTML代码制作了一个包含3个按钮（btn-navbar）的页脚。折叠导航栏后，我可以正确地进行操作，但按钮显示在同一行中，而不是像<li>元素一样显示在彼此之上。

  <!-- Fixed navbar bottom -->
  <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">

      <div class="navbar-collapse collapse" id="navbar-footer">

        <ul class="nav navbar-nav navbar-right">

          <button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button>
          <button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
          <button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>

        </ul>

      </div><!--/.nav-collapse -->

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

    </div>
  </div>

它显示如下......

我希望这样展示......

提前致谢。

Answer 1

<强> Working Fiddle

你缺少ul里面的李。 HTML标记问题：

 <ul class="nav navbar-nav navbar-right">
   <li><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
   <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
   <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button></li>
 </ul>

Answer 2

将每个按钮包裹在li标签中，如下所示：

<li><button type="button" class="btn btn-warning navbar-btn">
<span class="glyphicon glyphicon-check"></span> Verificar</button></li>

ul标签内的每一行都需要包含在li标签中，以便按预期运行。

Answer 3

您的HTML不正确。 button元素无法直接嵌套在ul元素中。

您必须将您的按钮元素包装在LI元素中。

试试这个HTML：

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container-fluid">
     <div class="navbar-collapse collapse" id="navbar-footer">
        <ul class="nav navbar-nav navbar-right">
          <li class = "active"><button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button></li>
          <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
          <li><button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button></li>
          <li><button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>
       </ul>
    </div>

   <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
   </div>

  </div>
</div>

Working Fiddle