Bootstrap 3,如何在导航栏上右键对齐按钮？

Question

我在这里主持编码和预览.

我想对齐我的第二个按钮,请告诉我该怎么做.

谢谢.

Answer 1

检查演示

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

并添加

右拉式

按到你的按钮.

Answer 2

对于Bootstrap 3,.navbar-right就是这样.

<ul class="nav navbar-nav navbar-right">
.
.
</ul>

Answer 3

在导航栏中,如果Bootstrap对齐发生的情况略有不同.

为了在导航栏中右侧对齐元素,将所需元素放在一个单独的div中,并在其中创建一个ul并将所需元素添加到列表中.

在div中添加一个类.pull-right来正确对齐元素.

示例代码:

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

如果有与在左边的元素对齐问题导航栏和一类.pull左到该div

Answer 4

这里的一个演示

好吧,做出改变.

.navbar-header{
  width:100%;
}

然后在要放置在右侧的按钮上放置一个类,例如 right-side-button

然后将该类应用于acss并以这种方式编辑:

.right-side-button{
  float:right;
}

你完成了!