如何使用CSS将Bootstrap标签居右对齐

Question

我有一个带有左、中、右三个部分的头部。我似乎无法想出适当的 CSS，使得右侧的列（具有“电子邮件历史记录”和“返回列表”）浮动到该列的右侧。有谁能告诉我如何实现这个效果？任何帮助都将不胜感激。

<div class="col-sm-5" style="text-align:left">
    <button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
   <h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
   <ul class="nav nav-pills">
      <li class="active"><a href="/GoHistory">Email History</a></li>
      <li class="active"><a href="/email_marketing/contact-list">Back To List</a></li>
   </ul>
</div>

- user2789697

Answer 1

注意：以下答案适用于Bootstrap 2和3；在Bootstrap 4中，等效的类是float-right，并且还提供了特定于视口的浮动类。

---

最简单的选项是将 pull-right 类添加到 ul 元素中。这将使病例浮动到右侧。

附注：你可以使用帮助类 text-left（通常是冗余的）和text-center 代替这些内联样式。

下面是一个 bootply 示例：http://www.bootply.com/134139

- nthall

---

这会导致一些浮点问题，而且根据我的经验，.clearfix并不能帮助它被清除。 - Megaroeny

一方面，当修复如此简单时，我感到非常愚蠢。另一方面，当修复如此容易时，这真是太好了。谢谢。 - user2789697

只是提醒一下，如果您没有使用列，而只是普通的导航栏，您将需要使用我的以下解决方案 :) 是的，很高兴它很容易 :P - Megaroeny

pull-right实用程序已被移除，取而代之的是float-right，因此答案应该更新。 - Matthias Hagemann

谢谢指出，我已经更新了答案以涵盖旧版和新版。 - nthall

Answer 2

需要覆盖一些Bootstrap样式...

您需要删除列表项上的浮动，并将其设置为display:inline-block。然后对于无序列表元素，添加text-align:left。

下面是CSS：

ul.nav.nav-pills {
    text-align: right;
}

.nav-pills>li {
    float: none;
    display: inline-block;
}

祝您愉快！

- Megaroeny

---

这种方法最适合用于Bootstrap导航选项卡的右对齐。以下是一个带有上述CSS样式的Bootstrap导航选项卡示例：http://jsbin.com/yuxiyi/edit?html,css,output - Preshan Pradeepa

Answer 3

尝试在每个 div 上使用 style="float:left;"，以及一个 <ul class="nav nav-pills" style="float:right;">。之后清除浮动。

- Fven