Bootstrap pull-right che provoca la sovrapposizione degli elementi

Question

Sto cercando di ottenere un singolo pulsante posizionato sopra un elenco, ma con il pulsante a destra.

Quando aggiungo la classe pull-right al pulsante (o a un div contenente) il pulsante viene quindi sovrapposto all'elenco.

<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

si dovrebbe aggiungere la classe pull-right all'elemento button invece e quindi aggiungere un clearfix all'elemento genitore. In tal modo, lo div non collasserà su se stesso.

Updated Example

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

---

In alternativa, poiché il button è un elemento inline-block livello, si potrebbe evitare galleggiare e utilizzare text-align:right invece. Basta aggiungere la classe text-right al genitore. Non è più necessario il clearfix perché l'elemento button non viene rimosso dal flusso di documenti.

Example Here

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