Bootstrap 3: Элементы Span, плавающие прямо в элементе списка-списка, не потребляют вертикальное пространство

В Bootstrap 3 list-group-item у меня есть значок, текст и два значка/кнопки, которые должны плавать вправо.

Я пробовал это:

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

Это отлично работает, если результат соответствует одной строке:

rendering with wide window

Он также работает, когда окно настолько тонкое, что фактический текст не помещается в одну строку:

the text wrapped, leaving a place for the pull-right spans

Однако, если окна позволяют оставлять текст в одной строке, но недостаточно пространства для растягивания, все становится беспорядочным:

float sticks out below

То, что я действительно хочу, состоит в том, что pull-right охватывает новую строку и выравнивается вправо, а list-group-item расширяется по вертикали для их соответствия. Как я могу это достичь?

Ответы

Ответ 1

Чтобы поддерживать выравнивание кнопок, оберните вокруг них новый элемент и поплавьте элемент обертывания. Затем очистите элементы float от списка с классом .clearfix, чтобы исправить их высоту.

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

См. пример в реальном времени: http://jsfiddle.net/cdog/EpG7x/.

Однако размещение кнопок внутри ссылки недействительно в соответствии с спецификацией HTML5 от W3C.

Элемент a может быть обернут вокруг всех абзацев, списков, таблиц, и т.д., даже целые разделы, если нет интерактивных содержимое внутри (например, кнопок или других ссылок).

Аналогичный результат может быть достигнут с использованием панелей с таблицами.

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

Чтобы предотвратить содержимое содержимого внутри ячейки, вы можете использовать класс .text-nowrap (добавленный в Bootstrap v3.2.0).

См. пример в реальном времени: http://jsfiddle.net/cdog/6mFDH/.