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

我用下面的HTML代码制作了一个包含3个按钮（btn导航栏）的页脚。当导航栏折叠时，我可以正确地调整它，但是按钮都显示在同一行中，而不是像对

元素那样一个接一个地显示

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

验证车
取消者
接受器

切换导航

它是这样显示的

我希望它像这样展示

---

提前感谢。

将您的每个按钮包装在一个li标签中，如下所示：

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

验证车

ul标签内的每一行都需要包裹在li标签中，才能正常工作。

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

验证车
取消者
接受器

您的HTML不正确。

按钮

元素不能直接嵌套在

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>

检查车辆
取消者
取消者
接受器

切换导航

---

文本和图标看起来与按钮大不相同，或者这只是一种解释？您没有将按钮放在

s中有什么原因吗？

的唯一允许内容是零个或多个

元素，最终与和

元素混合。您可能需要更新链接。它不再起作用了。