Html 如何用css证明引导药片的正确性

我有一个标题有三个部分，左，中，右。我似乎想不出合适的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>

保存联系人
编辑联系人

注意：以下答案对引导程序2和3有效；在Bootstrap 4中，等效类为

右浮动

，并且

---

最简单的选择是将class

pull right

添加到

ul

元素中。这将使药丸向右浮动

旁注：您可以将这些内联样式替换为辅助类

text left

（这通常是多余的）和

text center

---

下面是一个引导示例：

在每个分区上尝试一个

style=“float:left；”

，然后在每个分区上尝试一个

。然后清除浮动。

需要覆盖一些引导样式

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

以下是CSS：

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

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

---

享受吧

但这会导致一些浮动问题，根据我的经验，.clearfix不能帮助它被清除。一方面，当修复如此简单时，我觉得自己很愚蠢。另一方面，当修复非常容易时，这是很好的。谢谢。只是一个警告，如果你不使用列，只是一个普通导航，你需要我的解决方案如下：）是的，很高兴它很简单：p

pull right

实用程序支持

float right

，所以答案应该更新。谢谢你指出这一点；我已经更新了答案，以解决新旧版本的问题。这种方法最适合引导导航选项卡的正确对齐。下面是一个带有上述CSS的引导导航选项卡的示例。