Bootstrap 3: Elementy przęseł unoszące się w prawo na liście pozycji grupy nie zajmują miejsca w pionie

Question

W Bootstrap 3 list-group-item mam ikonę, tekst i dwie ikony/przyciski, które powinny unosić się w prawo.

Próbowałem to:

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

Działa to doskonale, jeśli wynik mieści się w jednym wierszu:

działa również, gdy okno jest tak cienka, że ​​rzeczywisty tekst nie mieści się w jednej linii:

Jednakże, jeśli okna umożliwia tekst na pobyt w jednej linii, ale nie ma wystarczająco dużo miejsca dla przęseł rozkładanymi rację, wszystko się pokręcić:

co ja właściwie chcę to że zakresy pull-right rozpoczynają nową linię i wyrównują się do prawej, a list-group-item rozciąga się pionowo, aby pasowały. Jak mogę to osiągnąć?

Answer 1

Aby zachować wyrównanie przycisków, owinąć wokół nich nowy element i unieść element owijający. Następnie wyczyść float na elementach listy klasą .clearfix, aby ustalić ich wysokość.

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

Zobacz na żywo przykład tutaj: http://jsfiddle.net/cdog/EpG7x/.

Jednak umieszczanie przycisków w łączu jest nieprawidłowe zgodnie z HTML5 specification from W3C.

Element a mogą być owinięte wokół całej ust, list tabel i tak dalej, a nawet całe sekcje, tak długo jak nie ma interaktywne zawartość w zakresie (na przykład przycisków lub innych połączeń).

Podobny wynik można uzyskać za pomocą paneli z tabelami.

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

Aby zapobiec zawartość wewnątrz komórki od zawijania, można użyć klasy .text-nowrap (dodane w Bootstrap v3.2.0).

Zobacz przykład na żywo tutaj: http://jsfiddle.net/cdog/6mFDH/.