it-swarm.com.ru

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

В 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 простирается вертикально для их подгонки. Как я могу этого достичь?

31
fefrei

Чтобы кнопки были выровнены, оберните вокруг них новый элемент и поместите элемент обтекания. Затем очистите 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/ .

74
cdog
<li class="list-group-item d-flex justify-content-between align-items-center">
Text Here
<a href="javascript:void(0);" onclick="Delete('')"><i class="fas fa-trash-alt"></i></a>
</li>

Это будет работать для bootstrap 4.0 последней версии

1
SHUBHASIS