web-dev-qa-db-fra.com

Bootstrap 3 btn-group width

J'ai un autre problème lié à Bootstrap ... Je veux ajouter une radio et des cases à cocher à mon formulaire, je voudrais aussi qu'ils prennent 100% de la largeur de l'élément de formulaire.

J'ai ajouté un groupe de boutons comme ceci:

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

Cela me donne de jolis boutons de type radio:

Mais comme vous pouvez le constater, leur largeur est fixe. Cela peut-il être corrigé avec les classes bootstrap? Encore une fois, voici mon exemple de code: http://jsfiddle.net/Misiu/yy5HZ/5/

csscss3twitter-bootstraptwitter-bootstrap-3
22
Misiu

Utilisez la classe .btn-group-justified intégrée: Documents officiels

Faire un groupe de boutons étirer à des tailles égales pour couvrir la totalité largeur de son parent. Fonctionne également avec les menus déroulants dans le groupe de boutons.

Ancres:

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> 
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a> 
</div>

Boutons:

Pour utiliser des groupes de boutons justifiés avec des éléments <button>, vous devez envelopperchaque bouton d'un groupe de boutons. La plupart des navigateurs n'appliquent pas correctement notre CSS pour la justification des éléments <button>, mais depuis nous prenons en charge boutons déroulants, nous pouvons contourner ce problème.

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

JSFiddle

69
Schmalzy

Vous pouvez simplement utiliser les classes bootstrap col-n, donc si vous avez 2 boutons, utilisez col-xs-6 dessus. Le problème est quand vous avez 5 boutons par exemple. Il n'y a pas de classe pour cela dans le système de grille bootstrap. Donc, je voudrais utiliser l'un des éléments suivants:

Pour différencier les groupes avec un nombre différent de boutons, utilisez des classes personnalisées supplémentaires:

JSFiddle

CSS

.btn-group {
    width: 100%;
}
.btn-group-2 label.btn  {
    width: 50%;
}
.btn-group-3 label.btn  {
    width: 33.3%;
}

HTML 

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="option1" />Yes</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" />Maybe</label>
    <label class="btn btn-danger">
        <input type="radio" name="options" id="option3" />No</label>
</div>

Si vous voulez éviter ces classes CSS, vous ne pouvez utiliser que jQuery:

JSFiddle

$('.btn-group').each(function(index, item) {
    $(item).find('.btn').css(
        'width', 100 / $(item).find('.btn').length + '%'
    )
});
4
Markus Kottländer

Une autre solution:

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}
1
Feeco

Vous pouvez simplement ajouter votre propre classe et leur donner une largeur de 33% (pour les 3 boutons) ou de 50% (pour les 2 boutons).

0
Valerie

Pour le bootstrap 4, les docs disent que vous pouvez le faire:

.btn-group-justified supprimé. En remplacement, vous pouvez utiliser <div class="btn-group d-flex" role="group"></div> pour envelopper des éléments avec .w-100.

0
max kaplan

Si la solution de @ Schmalzy ne fonctionne pas, vous utilisez peut-être Bootstrap v3.0.0, pour lequel ajoutez les styles suivants en plus du balisage HTML dans la solution de @ Schmalzy.

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
0
ZerosAndOnes