Поперечное перекрытие элемента Bootstrap

Я пытаюсь получить одну кнопку, расположенную над списком, но с кнопкой вправо.

Когда я добавляю класс 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/

Ответ 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>