我使用以下 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>
显示是这样的...
我希望它像这样显示...
提前致谢。
最佳答案
您在 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>
关于html - Bootstrap 3 - 如何在折叠的导航栏中正确显示按钮 (btn-navbar)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24155025/