Bootstrap 3: Span Elemente schweben direkt in der Liste-Gruppe-Element verbrauchen keine vertikalen Raum

Question

In einem Bootstrap 3 list-group-item, habe ich ein Symbol, etwas Text und zwei Symbole/Schaltflächen, die nach rechts schweben sollte.

Ich versuchte dies:

<a class="list-group-item" ng-click="handleClick()"> 
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here 
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button> 
    <some:custom:span></some:custom:span> 
</a> 

Dies funktioniert gut, wenn das Ergebnis in einer Zeile paßt:

Es funktioniert auch, wenn das Fenster so dünn ist, dass der eigentliche Text nicht passen in einer Zeile:

Wenn jedoch die Fenster der Text in einer Zeile bleiben können, aber es gibt nicht genug Platz für die Pull-rechts Spannweiten, werden die Dinge vermasselt:

Was würde ich wirklich will, ist dass die pull-right Spannen eine neue Linie beginnen und rechts ausrichten, und die list-group-item sich vertikal erstreckt, damit sie passen. Wie kann ich das erreichen?

Answer 1

Um die Schaltflächen ausgerichtet zu halten, wickeln Sie ein neues Element um sie herum und schweben Sie das Umhüllungselement. Dann löschen Sie die float auf Listenelemente mit der .clearfix Klasse, um ihre Höhe zu beheben.

<div class="list-group"> 
    <a href="#" class="list-group-item clearfix"> 
    <span class="glyphicon glyphicon-file"></span> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <span class="pull-right"> 
     <button class="btn btn-xs btn-info">CCS</button> 
     <button class="btn btn-xs btn-warning"> 
     <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </span> 
    </a> 
</div> 

Siehe Live-Beispiel hier: http://jsfiddle.net/cdog/EpG7x/.

Das Platzieren von Schaltflächen innerhalb einer Verknüpfung ist jedoch gemäß HTML5 specification from W3C nicht gültig.

Das a Element kann um ganze Absätze, Listen, Tabellen, und so weiter, sogar ganze Abschnitte, so lange gewickelt werden, da es keine interaktive Inhalt innerhalb (z Tasten oder andere Verbindungen) ist.

Ein ähnliches Ergebnis kann mit Panels mit Tabellen erreicht werden.

<div class="panel panel-default"> 
    <table class="table table-hover"> 
    <tbody> 
     <tr> 
     <td> 
      <span class="glyphicon glyphicon-file"></span> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </td> 
     <td class="text-right text-nowrap"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
      <span class="glyphicon glyphicon-trash"></span> 
      </button> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Zum Inhalt innerhalb einer Zelle verhindern Umwickeln Sie die .text-nowrap Klasse (hinzugefügt in Bootstrap v3.2.0) verwenden können.

Siehe Live-Beispiel hier: http://jsfiddle.net/cdog/6mFDH/.