web-dev-qa-db-fra.com

Définir la largeur d'un groupe de boutons à 100% et rendre les boutons égaux en largeur?

J'utilise Bootstrap et j'aimerais définir un btn-group entier pour avoir une largeur de 100% de son élément parent. Je voudrais aussi que les boutons intérieurs prennent des largeurs égales. En l'état, je ne peux pas non plus y arriver. 

J'ai créé un JSFiddle ici: http://jsfiddle.net/BcQZR/12/

Voici le HTML: 

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

Et voici mon CSS actuel, qui ne fonctionne pas:

#colours { 
  width: 100%;
}
csstwitter-bootstrap
67
Richard

BOOTSTRAP 2 ( source )

Le problème est qu'il n'y a pas de largeur définie sur les boutons. Essaye ça:

.btn {width:20%;}

MODIFIER:

Par défaut, les boutons prennent une largeur automatique de la longueur du texte plus du remplissage. Je suppose donc que, dans votre exemple, il correspond probablement davantage à 14,5% pour 5 boutons (pour compenser le remplissage).

Remarque: 

Si vous ne voulez pas essayer de compenser le bourrage, vous pouvez utiliser box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

19
Kris Hollenbeck

Bootstrap a la classe .btn-group-justified css.

La structure est basée sur le type de balises que vous utilisez.

Avec les balises <a>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
</div>

Avec les balises <button>

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>
153
Sam Axe

Il n'y a pas besoin de css supplémentaire, la classe .btn-group-justified fait cela.

Vous devez ajouter ceci à l'élément parent, puis envelopper chaque élément btn dans un div avec .btn-group comme ceci 

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>
41
Simon Katan

Je n'aime pas la solution de réglages de largeur sur .btn car elle suppose qu'il y aura toujours le même nombre d'éléments dans le groupe .btn. Ceci est une hypothèse erronée et conduit à un fichier CSS volumineux et spécifique à la présentation.

Une meilleure solution consiste à modifier l'affichage de .btn-group avec .btn-block et child .btn. Je crois que c'est ce que vous cherchez:

.btn-group.btn-block {
    display: table;
}
.btn-group.btn-block > .btn {
    display: table-cell;
}

Voici un violon: http://jsfiddle.net/DEwX8/123/

Si vous préférez avoir des boutons de même largeur (dans des limites raisonnables) et ne pouvez prendre en charge que les navigateurs prenant en charge flexbox, essayez plutôt ceci:

.btn-group.btn-block {
    display: flex;
}
.btn-group.btn-block > .btn {
    flex: 1;
}

Voici un violon: http://jsfiddle.net/DEwX8/124/

9
OregonJeff

Pour bootstrap 4 ajoutez simplement cette classe:

w-100 

5
MacGyver

Solution Bootstrap 4

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

En gros, vous indiquez la largeur à 100% au conteneur btn-group en y ajoutant la classe w-100. Les boutons à l'intérieur rempliront automatiquement tout l'espace.

0
lokers

Angulaire _ ​​- groupe de boutons de même largeur

En supposant que vous ayez un tableau de "choses" dans votre champ ...

  • Assurez-vous que la div du parent a une largeur de 100%.
  • Utilisez ng-repeat pour créer les boutons dans le groupe de boutons.
  • Utilisez ng-style pour calculer la largeur de chaque bouton.
<div class="btn-group"
     style="width: 100%;">
    <button ng-repeat="thing in things"
            class="btn btn-default"
            ng-style="{width: (100/things.length)+'%'}">
        {{thing}}
    </button>
</div>
0
Derek Soike

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs  btn-block  dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>

0
PPB

Bootstrap 4 

            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
0
Yianni