web-dev-qa-db-fra.com

Comment obtenir des groupes de boutons sur toute la largeur d'un parent dans Bootstrap?

Dans Bootstrap, comment puis-je obtenir un groupe de boutons semblable au suivant qui couvre toute la largeur d'un élément parent? (comme avec la classe ".btn-block", mais appliquée à un groupe 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>
htmlcsstwitter-bootstrapclassbuttongroup
18
Max

Flexbox peut le faire.

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

.special .btn {
  flex: 1
}
<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>

40
Paulie_D

Solution correcte pour Bootstrap 4 (à partir de sa documentation de migration):

Supprimé .btn-groupe-justifié. En remplacement, vous pouvez utiliser <div class="btn-group d-flex" role="group"></div> pour envelopper 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

34
Diego P. Steiner

Dans Bootstrap 4, utilisez .d-flex sur votre .btn-group et .w-100 sur des 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
5
Ryan Brodie

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

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

0
mhatch