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

工作小提琴

你在ul中缺少li。 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元素中。

您必須將您的button元素包裝在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>

工作小提琴