Bootstrap 3: gli elementi di span che galleggiano a destra nella lista gruppo-articolo non consumano spazio verticale

Question

In un Bootstrap 3 list-group-item, ho un'icona, del testo e due icone/pulsanti che dovrebbero essere visualizzati a destra.

ho provato questo:

<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> 

Questa grande opera se il risultato si inserisce in una sola riga:

Funziona anche quando la finestra è così sottile che il testo vero e proprio non lo fa inserire in una riga:

Tuttavia, se le finestre permette al testo di rimanere in una sola riga, ma non c'è abbastanza spazio per le campate di pull-destra, le cose si incasinato:

Quello che mi piacerebbe davvero voglio è che gli span pull-right inizino una nuova riga e si allineano a destra e che lo list-group-item si estenda verticalmente per adattarli. Come posso ottenerlo?

Answer 1

Per mantenere allineati i pulsanti, avvolgere un nuovo elemento attorno a loro e far galleggiare l'elemento di avvolgimento. Quindi deselezionare lo float in voci di elenco con la classe .clearfix per correggerne l'altezza.

<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> 

Vedere l'esempio dal vivo qui: http://jsfiddle.net/cdog/EpG7x/.

Tuttavia, posizionare i pulsanti all'interno di un collegamento non è valido in base allo HTML5 specification from W3C.

L'elemento a può essere avvolto intorno interi paragrafi, liste, tabelle, e così via, anche intere sezioni, fintanto che non v'è alcun contenuto interattivo all'interno (pulsanti esempio o altri collegamenti).

Un risultato simile può essere ottenuto utilizzando pannelli con tabelle.

<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> 

Per evitare contenuti all'interno di una cella da avvolgimento, è possibile utilizzare la classe .text-nowrap (aggiunto in Bootstrap v3.2.0).

Vedere l'esempio dal vivo qui: http://jsfiddle.net/cdog/6mFDH/.