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>
25
demandé sur Eduardo Yáñez Parareda 2015-12-24 12:39:53

4 réponses

Pour tous ceux qui trouvent cela après Bootstrap 4 Beta a été libéré...

<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>
37
répondu Chris Baswell 2017-08-30 20:22:46

En effet, la classe nav-justify est manquante. Vous pouvez l'ajouter vous-même en fonction du 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 montré dans la figure ci-dessous:

entrez la description de l'image ici

Gestion des bordures

  • en raison du HTML et du CSS spécifiques utilisés pour justifier les boutons (à savoir display: table-cell), les frontières entre eux sont doublées. Régulièrement bouton groups, 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 à Bootstrap, vous pouvez supprimer ou re-colorer les bordures.

Liens agissant comme des boutons

  • Si les éléments <a> sont utilisés pour agir comme des boutons-déclenchant la fonctionnalité dans la page, plutôt que de naviguer vers un autre document ou section dans la page en cours-ils devraient également recevoir un role="button".

Listes déroulantes

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és avec le bouton déroulant devrait ressembler à celui montré dans la figure ci-dessous:

entrez la description de l'image ici

Avec <button> éléments

  • pour utiliser des groupes de boutons justifiés avec <button> éléments, 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 soutenons les listes déroulantes de boutons, nous pouvons contourner cela.

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 les groupes de boutons avec des éléments <button> devrait ressembler à celui montré dans la figure ci-dessous:

entrez la description de l'image ici

20
répondu Bass Jobsen 2015-12-24 09:39:53

En S'appuyant sur la bonne réponse de Bass Jobsen , Voici la même fonctionnalité en 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 avec des listes déroulantes, des liens HTML et plus encore.

20
répondu Philip Stanislaus 2017-05-23 10:31:24

Lors de l'utilisation avec 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
répondu KingofDendroar 2018-03-07 15:47:52