Question

我有一个包含左，中，右三个部分的标题。我似乎无法提出正确的CSS来使列右侧（＆＃39;电子邮件历史记录＆＃39;以及＆＃39;返回列表＆＃39;）浮动到列的右侧。怎么能有人告诉我这是怎么做到的？任何帮助表示赞赏。

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

Answer 1

注意：以下答案适用于Bootstrap 2和3;在Bootstrap 4中，等效类为float-right，viewport-specific float classes are also available.

最简单的选择是将类pull-right添加到ul元素。这会使药片向右浮动。

旁注：您可以使用辅助类text-left（通常是多余的）和text-center替换这些内联样式。

这是一个很好的示例：http://www.bootply.com/134139

Answer 2

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

您需要删除列表项上的浮动并将其设置为显示：inline-block。然后对于unordered-list元素，添加text-align：left。

这是CSS：

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

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

享受！

Answer 3

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

如何用css正确证明bootstrap药片

3 个答案: