twitter-bootstrap 是否可以左对齐 Twitter Bootstrap 导航栏的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29732159/
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
Is left-aligning the button of a Twitter Bootstrap navbar possible?
提问by balteo
I would like for the button to appear on the left-hand side of the menu on mobile devices. Is this possible with Twitter Bootstrap?
我希望该按钮出现在移动设备菜单的左侧。Twitter Bootstrap 可以做到这一点吗？
Here is my markup:
这是我的标记：
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
To quote the official documentation:
引用官方文档：
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.
使用 .navbar-left 或 .navbar-right 实用程序类对齐导航链接、表单、按钮或文本。这两个类都会在指定的方向添加一个 CSS 浮点数。例如，要对齐导航链接，请将它们与应用的相应实用程序类分开放置。
这些类是 .pull-left 和 .pull-right 的混合版本，但它们的范围仅限于媒体查询，以便更轻松地处理跨设备大小的导航栏组件。
I did try the pull-leftbut I am worried as the official documentation mentions that navbar-leftis more appropriate - see above.
我确实尝试过，pull-left但我很担心，因为官方文档提到navbar-left更合适 - 见上文。
By the way navbar-leftdoes not work for me. Should I go ahead and use pull-leftdespite what the documentation says?
顺便说一句navbar-left，对我不起作用。pull-left尽管文档说了什么，我应该继续使用吗？
回答by isherwood
<button type="button" class="pull-left navbar-toggle ...
Regarding your question edit, I'm not convinced that navbar-leftwas intended to be used for the toggle button. It has explicit style statements that override what navbar-leftdoes.
关于您的问题编辑，我不相信它navbar-left旨在用于切换按钮。它有明确的样式声明，可以覆盖什么navbar-left。
If you do want to use it, however, it could be done by adding this to your custom stylesheet:
但是，如果您确实想使用它，可以通过将其添加到您的自定义样式表来完成：
.navbar-toggle.navbar-left {
float: left;
margin-left: 10px;
}
回答by A. Varma
You can use "pull-left" but you might have to add some left side padding to the icon bar using "padding-left" to the "navbar-header" div. Please see example below:
您可以使用“pull-left”，但您可能必须使用“padding-left”向“navbar-header”div 添加一些左侧填充到图标栏。请看下面的例子：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header" style="padding-left: 10px">
<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><asp:Literal ID="litMenuBar" runat="server"></asp:Literal></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
