Comment obtenir des groupes de boutons qui s'étendent sur toute la largeur d'un parent dans le Bootstrap?

Dans le Bootstrap, comment puis-je obtenir un bouton de groupe comme la suivante qui s'étendent sur toute la largeur d'un élément parent? (comme avec l' ".btn-block" de la classe, mais appliquée à un groupe de http://getbootstrap.com/css/#buttons-sizes )

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
InformationsquelleAutor Max | 2016-05-12
  1. 54

    Flexbox peut le faire.

    CSS:

    .btn-group.special {
  display: flex;
}

.special .btn {
  flex: 1
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

    • la meilleure méthode à utiliser
    • stackoverflow.com/a/45969088/6661239 Cela fonctionne sans modification de CSS
    • Je upvote cette fois si j'ai pu, cela fonctionne comme un charme
    • parfait........................
    InformationsquelleAutor Paulie_D
  2. 53

    Bonne solution pour Bootstrap 4 (à partir de la migration de la documentation):

    Supprimé .btn-group-justifiée. Comme un remplacement, vous pouvez utiliser <div class="btn-group d-flex" role="group"></div> comme un wrapper autour des éléments avec .w-100.

    Exemple:

    <div class="btn-group d-flex" role="group" aria-label="...">
  <button type="button" class="btn btn-default w-100">Left</button>
  <button type="button" class="btn btn-default w-100">Middle</button>
  <button type="button" class="btn btn-default w-100">Right</button>
</div>

    Source: https://getbootstrap.com/docs/4.0/migration/#button-group

    • Fonctionne parfaitement, simple, standard. Merci.
    • Ajouter une classe w-100 à la .btn-group élément, trop.
    • Il fonctionne parfaitement merci
    InformationsquelleAutor Diego P. Steiner
  3. 5

    Dans le Bootstrap 4, faire usage de .d-flex sur votre .btn-group et .w-100 sur les boutons individuels:

    .btn-group.d-flex(role='group')
  button.w-100.btn.btn-lg.btn-success(type='button') 
  button.w-100.btn.btn-lg.btn-danger(type='button') 
  .btn-group(role='group')
    button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
      | &#8226;&#8226;&#8226;
    .dropdown-menu
      a.dropdown-item(href='#') An option
      a.dropdown-item(href='#') Another option
    InformationsquelleAutor Ryan Brodie
  4. 2

    Vous pouvez également utiliser .btn-group-justified.

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="btn-group btn-group-justified">
    <a href="button" class="btn btn-default">Left</a>
    <a href="button" class="btn btn-default">Middle</a>
    <a href="button" class="btn btn-default">Right</a>
  </div>
</div>

    InformationsquelleAutor mhatch
  5. 2

    Vous pouvez également utiliser des bottes btn-block couvrent parent.

    Créer de bloc de touches niveau—ceux qui s'étendent sur toute la largeur d'un parent par l'ajout d' .btn-block.

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

    https://getbootstrap.com/docs/4.0/components/buttons/

    InformationsquelleAutor Kray