twitter-bootstrap 如何使用 css 正确证明引导药丸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23391685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one right-justify bootstrap pills with css
提问by user2789697
I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.
我有一个包含左、中和右三个部分的标题。我似乎无法想出合适的 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>
回答by nthall
NOTE:The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.
注意：以下答案适用于 Bootstrap 2 和 3；在 Bootstrap 4 中，等效类是float-right，并且还提供了特定于视口的浮点类。
The easiest option is to add the class pull-rightto the ulelement. This will float the pills to the right.
最简单的选择是将类添加pull-right到ul元素中。这将使药丸向右浮动。
Sidenote: you can replace those inline styles with the helper classes text-left(which is often redundant) and text-center.
旁注：您可以用辅助类text-left（通常是多余的）和text-center.
Here's a bootply example: http://www.bootply.com/134139
这是一个 bootply 示例：http: //www.bootply.com/134139
回答by jaminroe
Need to overwrite some Bootstrap styling...
需要覆盖一些 Bootstrap 样式...
You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.
您需要删除列表项上的浮点数并将其设置为 display:inline-block。然后对于无序列表元素，添加 text-align:left。
Here's the CSS:
这是CSS：
ul.nav.nav-pills {
text-align: right;
}
.nav-pills>li {
float: none;
display: inline-block;
}
Enjoy!
享受！
回答by Fven
Try a style="float:left;"on each div. And a <ul class="nav nav-pills" style="float:right;">. After that clear the float.
style="float:left;"在每个 div 上尝试一个。和一个<ul class="nav nav-pills" style="float:right;">。之后清除浮动。
