web-dev-qa-db-fra.com

Justifier les boutons avec Bootstrap v4

Bootstrap v4 supprime la classe .btn-group-justified, voir https://github.com/twbs/bootstrap/issues/17631

Comment justifier le bouton pour:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>
cssbootstrap-4twitter-bootstrap-4
29
Bass Jobsen

En effet, la classe de justification de navigation est manquante. Vous pouvez l'ajouter vous-même en vous basant sur le code de TB3 pour l'instant:

Code SCSS

// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  .btn,
  .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

code CSS compilé

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified .btn,
  .btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%; }
    .btn-group-justified .btn .btn,
    .btn-group-justified .btn-group .btn {
      width: 100%; }
    .btn-group-justified .btn .dropdown-menu,
    .btn-group-justified .btn-group .dropdown-menu {
      left: auto; }

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

Le code HTML ci-dessus ressemblera maintenant à celui illustré dans la figure ci-dessous:

 enter image description here

Gestion des frontières

  • En raison du code HTML et CSS spécifique utilisé pour justifier les boutons (à savoir display: table-cell), les bordures qui les séparent sont doublés. Dans les groupes de boutons normaux, margin-left: -1px est utilisé pour empiler les bordures au lieu de les supprimer. Cependant, margin ne fonctionne pas avec display: table-cell. Par conséquent, en fonction de vos personnalisations pour Bootstrap, vous souhaiterez peut-être supprimer ou repeindre les bordures.

Liens agissant comme des boutons

  • Si les éléments <a> sont utilisés pour agir comme des boutons (déclenchant la fonctionnalité de page, plutôt que de naviguer vers un autre document ou une section de la page actuelle), ils doivent également recevoir un role="button" approprié.

Dropdowns

Utilisez le code HTML suivant pour les boutons déroulants:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
   <a class="btn btn-secondary" href="#" role="button">Left</a>
   <a class="btn btn-secondary" href="#" role="button">Middle</a>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
 </div>

Le groupe de boutons justifié avec bouton déroulant doit ressembler à celui illustré dans la figure ci-dessous:

 enter image description here

Avec des éléments <button>

  • Pour utiliser des groupes de boutons justifiés avec des éléments <button>, vous devez envelopper chaque bouton dans un groupe de boutons. La plupart des navigateurs n'appliquent pas correctement notre CSS pour la justification aux éléments <button>, mais puisque nous prenons en charge les menus déroulants, nous pouvons contourner ce problème.

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Right</button>
  </div>
 </div>

Le code HTML ci-dessus utilisé pour justifier des groupes de boutons avec des éléments <button> devrait ressembler à celui présenté dans la figure ci-dessous:

 enter image description here

21
Bass Jobsen

Pour ceux qui trouveront cela après la sortie de Bootstrap 4 Beta ...

<div class="btn-group d-flex" role="group">
   <a href="" class="btn btn-secondary w-100">Previous</a>
   <a href="" class="btn btn-secondary w-100">Next</a>
</div>

49
Chris Baswell

S'appuyant sur La grande réponse de Bass Jobsen , voici la même fonctionnalité utilisant flexbox au lieu de display: table;

Code SCSS

// Justified button groups
// ----------------------

.btn-group-justified {
  display: flex;
  width: 100%;
  .btn,
  .btn-group {
    flex: 1;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

HTML

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

Veuillez vous référer à La réponse de Bass Jobsen pour plus de détails sur l'utilisation des listes déroulantes, des liens HTML, etc.

20
Philip Stanislaus

Lors de l'utilisation de class="dropdown-menu" avec Bootstrap V4.0, basé sur la solution de Chris Baswell ci-dessus et la documentation Bootstrap: https://getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
        </button>
        <div class="dropdown-menu">
            <a href="" class="btn btn-secondary w-100">Previous</a>
            <a href="" class="btn btn-secondary w-100">Next</a>
        </div>
    </div>
</div>
0
KingofDendroar