Bootstrap Button-Group mit Float

Question

Ich versuche, eine Gruppe einiger Tasten und schweben sie rechts von einem div Container zu erstellen:

<div class="thumbnail"> 
    <div class="caption"> 
    <p>Here is some blurb...</p> 
    <div class="button-group pull-right"> 
      <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
      <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-home"></span></button> 
     </div> 
    </div> 
</div> 

Wie Sie von dieser Geige sehen können die Tasten Ausbrechen der div wenn ich mich bewerben float-right:

https://jsfiddle.net/xa9wvouc/6/

ich die Beschriftung einstellen könnte eine min0height haben, aber das fühlt sich an wie ein Hack? Was ist der richtige Weg, um dieses Ziel zu erreichen?

Answer 1

Wenn Sie Bootstrap verwenden, wickeln Sie die Schaltflächengruppe in einer Reihe (siehe Code unten). Von hier aus können Sie den Rand-rechts auf Knopf-Gruppe anpassen, wie Sie für richtig halten.

https://jsfiddle.net/meppiel/ysx7nvk4/1/

<div class="thumbnail"> 
    <div class="caption"> 
    <div class="row"> 
     <div class="button-group pull-right" style="margin-right: 15px"> 
     <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
     <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-home"></span></button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

Denn wenn Sie Pull-Recht auf eine Schaltfläche-Gruppe gelten, bedeutet dies, dass die Knopf-Gruppe Schwimmer sein wird, und die Höhe der übergeordneten div Zusammenbruch sein. Um zu vermeiden, kollabierenden Eltern div, müssen Sie Clearfix-Klasse auf die Eltern div