Bootstrap 3，如何在导航栏上将按钮右对齐？

Question

我在这里托管编码和预览。

我想将我的第二个按钮右对齐，请告诉我如何做。

谢谢。

- Artisan

---

菜单的右侧？ - rpasianotto

我希望将第二个按钮放在导航栏的右侧。 - Artisan

Answer 1

查看演示

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

并将

pull-right

类添加到您的按钮中。

- Anshad Vattapoyil

---

但是最后一个按钮和倒数第二个按钮之间没有空格。为什么要使用Bootstrap？ - trusktr

@trusktr 我认为在Bootstrap中没有内置选项，你必须添加自定义样式.navbar-btn { margin-right:6px;}。 - Anshad Vattapoyil

这个答案非常糟糕！没有修复任何问题。 - Miguel Peniche

Answer 2

对于 Bootstrap 3，.navbar-right 的作用就是把导航条放置在右侧。

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

- Ajoy

---

我试过在 Bootstrap v4 alpha 版本中使用 navbar-right，但无效。将 ul 元素加上 pull-right 则有效。 - A.W.

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-left应用于该

。

- Supratik Majumdar

---

唯一有效的答案是：<div class="pull-left"> <ul class="nav navbar-nav"> <li><a href="#"> something1</a></li> </ul> </div> <div class="pull-right"> <ul class="nav navbar-nav">
<li><a href="#">LogOut&nbsp</a></li> </ul>
</div> - MarcoZen

目前为止最佳解决方案 - Ph0b0x

Answer 4

这里有一个演示DEMO

好的，进行更改。

.navbar-header{
  width:100%;
}

然后在您想要放置在右侧的按钮上添加一个类，例如right-side-button

然后将该类应用于a，并通过css进行编辑：

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

完成了！

- rpasianotto