Html Bootstrap 3 - 如何在折叠的导航栏中正确显示按钮（btn-navbar）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24155025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - How to properly display buttons (btn-navbar) in collapsed navbar?
提问by nacho_dh
I made a footer that contains 3 buttons (btn-navbar) using the following HTML code. When the navbar is collapsed I can toogle it properly, but the buttons are displayed all in the same line instead of one on top of each other like it does with <li>elements.
我使用以下 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>
It shows like this...
是这样显示的...
And I'd like it to show like this...
我希望它像这样显示......
Thanks in advance.
提前致谢。
回答by Aamir Shahzad
You are missing li within ul. HTMLmarkup issue:
你在 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>
回答by Doa
Wrap each of your buttons in an li tag, like this:
将每个按钮包裹在一个 li 标签中，如下所示：
<li><button type="button" class="btn btn-warning navbar-btn">
<span class="glyphicon glyphicon-check"></span> Verificar</button></li>
Each line inside of a ul tag needs to be wrapped in li tags to behave as expected.
ul 标签内的每一行都需要包含在 li 标签中才能按预期运行。
回答by Ishan Jain
Your HTML is not correct. A buttonelement cannot directly nested within a ulelement.
您的 HTML 不正确。甲button元件不能直接嵌套于内ul元件。
You must wrap your button element in LIelement.
您必须将按钮元素包装在LIelement.js 中。
Try this HTML:
试试这个 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>
