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