web-dev-qa-db-fra.com

Bootstrap 3: les éléments Span flottant à droite dans list-group-item ne consomment pas d'espace vertical

Dans un Bootstrap 3 list-group-item, J'ai une icône, du texte et deux icônes/boutons qui devraient flotter vers la droite.

J'ai essayé ceci:

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

Cela fonctionne très bien si le résultat tient sur une seule ligne:

rendering with wide window

Cela fonctionne également lorsque la fenêtre est si fine que le texte réel ne tient pas sur une seule ligne:

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

Cependant, si les fenêtres permettent au texte de rester sur une seule ligne, mais qu'il n'y a pas assez d'espace pour les portées à droite, les choses sont gâchées:

float sticks out below

Ce que je voudrais en fait, c'est que le pull-right les travées commencent une nouvelle ligne et s'alignent à droite, et le list-group-item s'étend verticalement pour qu'ils s'adaptent. Comment puis-je y parvenir?

csshtml5css-floattwitter-bootstrap-3
31
fefrei

Pour garder les boutons alignés, enroulez un nouvel élément autour d'eux et faites-le flotter. Effacez ensuite le float sur les éléments de la liste avec le .clearfix classe pour fixer leur hauteur.

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

Voir l'exemple en direct ici: http://jsfiddle.net/cdog/EpG7x/ .

Cependant, placer des boutons dans un lien n'est pas valide selon la spécification HTML5 du W3C .

L'élément a peut être enroulé autour de paragraphes entiers, de listes, de tableaux, etc., même de sections entières, tant qu'il n'y a pas de contenu interactif à l'intérieur (par exemple des boutons ou d'autres liens) .

Un résultat similaire peut être obtenu en utilisant des panneaux avec des tables à la place.

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

Pour empêcher le contenu à l'intérieur d'une cellule de s'habiller, vous pouvez utiliser le .text-nowrap classe (ajouté dans Bootstrap v3.2.0).

Voir l'exemple en direct ici: 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>

Cela fonctionnera pour bootstrap 4.0 dernier v

1
SHUBHASIS