Bootstrap pull-right导致元素重叠

Question

我试图在列表上方放置一个按钮,但右边的按钮.

当我将右拉类添加到按钮(或包含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/

Answer 1

您应该将该pull-right类添加到button元素中,然后将clearfix添加到父元素.这样做,div不会崩溃.

更新的示例

<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元素未从文档流中删除.

这里的例子

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