twitter-bootstrap Bootstrap 3,如何右对齐导航栏上的按钮?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18874366/
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 right align button on the navbar?
提问by Artisan
I host coding and previewhere.
我在这里主持编码和预览。
I would like to right-align my 2nd button, please show me how to do that.
我想右对齐我的第二个按钮,请告诉我如何做到这一点。
Thanks.
谢谢。
采纳答案by devo
回答by Ajoy
For Bootstrap 3, .navbar-rightdoes just that.
对于 Bootstrap 3,.navbar-right就是这样做的。
<ul class="nav navbar-nav navbar-right">
.
.
</ul>
回答by Supratik Majumdar
Within the navbarin case of Bootstrap alignment happens a little differently.
在Bootstrap 对齐的情况下,导航栏中的情况略有不同。
For aligning elements to the right in the navbarput the required elements in a separate divand within it create a uland add the required elements to the list.
为了在导航栏中将元素向右对齐,将所需元素放在单独的div 中,并在其中创建一个ul并将所需元素添加到列表中。
To the divadd a class .pull-rightto align the elements right.
向div添加一个类.pull-right以正确对齐元素。
Sample Code:
示例代码:
<div class="pull-right">
<ul class="nav navbar-nav">
<li><button type="submit" class="btn navbar-btn btn-danger" name="logout" id="logout" value="Log Out">Log Out</button></li>
</ul>
</div>
If there are alignment issues with elements on the left of the navbarand a class .pull-leftto that div
如果导航栏左侧的元素和该 div的类.pull-left存在对齐问题
回答by rpasianotto
A DEMO HERE
演示在这里
Well, make that change.
好吧,做出改变。
.navbar-header{
width:100%;
}
Then place a class on the button that you want to put on the right side, for example right-side-button
然后在你想放在右侧的按钮上放置一个类,例如 right-side-button
then apply that class to the aand edit in css that way:
然后将该类应用到acss 并以这种方式编辑:
.right-side-button{
float:right;
}
And you are done!
你已经完成了!

