Bootstrap pull-right verursacht Elementüberlappung

Question

Ich versuche, eine einzelne Schaltfläche über einer Liste positioniert, aber mit der Schaltfläche auf der rechten Seite.

Wenn ich die Pull-Right-Klasse der Schaltfläche hinzufügen (oder eine div enthält), wird die Schaltfläche dann von der Liste überlagert.

<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

Sie sollen die pull-right Klasse das button Element stattdessen hinzufügen und dann einen clearfix auf das übergeordnete Element hinzufügen. Auf diese Weise wird die div nicht auf sich selbst zusammenfallen.

Updated Example

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

---

Alternativ kann, da die button ein Element inline-block Ebene ist, könnten Sie Floating es vermeiden und text-align:right stattdessen verwenden. Fügen Sie einfach die Klasse text-right zum übergeordneten Element hinzu. Sie benötigen den Clearfix nicht mehr, weil das Element button nicht aus dem Dokumentfluss entfernt wird.

Example Here

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