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不会自行崩溃。

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>

Bootstrap pull-right导致元素重叠

1 个答案: