Bootstrap 右拉导致元素重叠

【问题标题】：Bootstrap pull-right causing element overlapBootstrap 右拉导致元素重叠
【发布时间】：2017-06-28 20:13:14
【问题描述】：

我试图让一个按钮位于列表上方，但按钮位于右侧。

当我将 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/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您应该将pull-right 类添加到button 元素，然后将clearfix 添加到父元素。这样做，div 不会自行崩溃。

Updated Example

<div class="clearfix">
    <button type="button" class="btn btn-default pull-right">Add</button>
</div>

另外，由于button 是inline-block 级别元素，您可以避免浮动它并改用text-align:right。只需将类 text-right 添加到父级即可。您不再需要 clearfix，因为 button 元素并未从文档流中移除。

Example Here

<div class="text-right">
    <button type="button" class="btn btn-default">Add</button>
</div>

【讨论】：