twitter-bootstrap Bootstrap 右拉导致元素重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23667427/
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
Bootstrap pull-right causing element overlap
提问by user380689
I am trying to get a single button positioned above a list, but with the button to the right.
我试图让一个按钮位于列表上方，但按钮位于右侧。
When I add the pull-right class to the button (or a containing div) the button is then overlapped by the list.
当我将 pull-right 类添加到按钮（或包含 div）时，该按钮将与列表重叠。
<div>
<div class="pull-right">
<button type="button" class="btn btn-default">Add</button>
</div>
<ul class="list-group">
<li class="list-group-item">Something something 1</li>
<li class="list-group-item">Something something 2</li>
<li class="list-group-item">Something something 2</li>
</ul>
</div>
jsfiddle: http://jsfiddle.net/paulbau/384YH/
jsfiddle：http: //jsfiddle.net/paulbau/384YH/
回答by Josh Crozier
You should add the pull-rightclass to the buttonelement instead and then add a clearfix to the parent element. In doing so, the divwon't collapse upon itself.
您应该改为将pull-right类添加到button元素，然后向父元素添加清除修复。这样做时，div不会自行倒塌。
<div class="clearfix">
<button type="button" class="btn btn-default pull-right">Add</button>
</div>
Alternatively, since the buttonis an inline-blocklevel element, you could avoid floating it and use text-align:rightinstead. Just add the class text-rightto the parent. You no longer need the clearfix because the buttonelement isn't being removed from the document flow.
或者，由于button是一个inline-block级别元素，您可以避免浮动它并改用它text-align:right。只需将类添加text-right到父类即可。您不再需要 clearfix，因为该button元素不会从文档流中删除。
<div class="text-right">
<button type="button" class="btn btn-default">Add</button>
</div>
