css - horizontalmente - list bootstrap 3

Bootstrap 3: los elementos de Span que flotan a la derecha en el elemento de grupo de lista no consumen espacio vertical

Question

En un list-group-item Bootstrap 3, tengo un ícono, algo de texto y dos íconos / botones que deben flotar a la derecha.

Intenté esto:

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

Esto funciona muy bien si el resultado se ajusta en una línea:

También funciona cuando la ventana es tan delgada que el texto real no cabe en una línea:

Sin embargo, si las ventanas permiten que el texto permanezca en una línea, pero no hay suficiente espacio para los tramos de pull-right, las cosas se arruinan:

Lo que realmente quiero es que los tramos de pull-right comiencen una nueva línea y se alineen a la derecha, y el elemento list-group-item extiende verticalmente para que quepan. ¿Cómo puedo lograr eso?

Answer 1

Para mantener los botones alineados, enrolle un nuevo elemento alrededor de ellos y flote el elemento de envoltura. A continuación, borre el float de los elementos de la lista con la clase .clearfix para corregir su altura.

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

Vea el ejemplo en vivo aquí: http://jsfiddle.net/cdog/EpG7x/ .

Sin embargo, colocar botones dentro de un enlace no es válido según la especificación HTML5 del W3C .

El elemento a puede envolverse en párrafos, listas, tablas, etc. enteros, incluso secciones enteras, siempre que no haya contenido interactivo dentro (por ejemplo, botones u otros enlaces).

Se puede lograr un resultado similar utilizando paneles con tablas en su lugar.

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

Para evitar que se .text-nowrap el contenido dentro de una celda, puede usar la clase .text-nowrap (agregada en Bootstrap v3.2.0).

Vea el ejemplo en vivo aquí: http://jsfiddle.net/cdog/6mFDH/ .