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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:27:04  来源:igfitidea点击:

Bootstrap 3, how to right align button on the navbar?

twitter-bootstraptwitter-bootstrap-3

提问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

Check demo

检查演示

.navbar-header{
  margin-left:5px;
  width:100%;
}

And add

并添加

pull-right

拉右

class to your button.

类到您的按钮。

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

你已经完成了!