Bootstrap powoduje przeciąganie elementu powodując nakładanie się

Question

Próbuję uzyskać pojedynczy przycisk umieszczony nad listą, ale z przyciskiem po prawej stronie.

Kiedy dodaję klasę "pull-right" do przycisku (lub zawierającego element div), przycisk jest następnie nakładany na listę.

<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

Należy dodać klasę pull-right do elementu button zamiast a następnie dodać clearfix do elementu nadrzędnego. W ten sposób div nie zapadnie się.

Updated Example

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

---

Alternatywnie, ponieważ button jest elementem inline-block poziom, można uniknąć pływające i używać text-align:right zamiast. Po prostu dodaj klasę text-right do rodzica. Nie jest już potrzebne oczyszczanie, ponieważ element button nie jest usuwany z przepływu dokumentów.

Example Here

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