J’utilise Bootstrap et j’aimerais définir un groupe entier de btn-group
pour avoir une largeur de 100% de son élément parent. J’aimerais aussi que les boutons intérieurs prennent des largeurs égales. En l’état, je ne peux pas y parvenir non plus.
J’ai fait un JSFiddle ici: http://jsfiddle.net/BcQZR/12/
Voici le HTML:
red orange yellow
Et voici mon CSS actuel, qui ne fonctionne pas:
#colours { width: 100%; }
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 un peu de remplissage, donc je suppose que pour votre exemple, il s’agit probablement de 14,5% pour 5 boutons (pour compenser le remplissage).
Remarque:
Si vous ne voulez pas essayer de compenser le remplissage, vous pouvez utiliser la box-sizing:border-box;
Bootstrap a la classe CSS .btn-group-justified
.
Sa structure est basée sur le type de balises que vous utilisez.
...
Avec les balises
Il n’y a pas besoin de css supplémentaire, la classe .btn-group-justified
fait.
Vous devez append ceci à l’élément parent, puis envelopper chaque élément btn dans un div avec .btn-group comme ceci
Je n’aime pas la solution des largeurs de parameters 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 CSS volumineux, spécifique à la présentation.
Une meilleure solution consiste à modifier l’affichage de .btn-group avec .btn-block et child .btn (s). Je crois que c’est ce que vous recherchez:
.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 largeur égale (dans des limites raisonnables) et ne prendre en charge que les navigateurs qui prennent 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/
Pour bootstrap 4, ajoutez simplement cette classe:
w-100
Angulaire – groupe de boutons de largeur égale
En supposant que vous ayez un éventail de «choses» dans votre scope …
Bootstrap 4