Boutons à largeur fixe avec Bootstrap

Bootstrap prend-il en charge les boutons à largeur fixe? Actuellement, si j'ai 2 boutons, "Enregistrer" et "Télécharger", la taille du bouton change en fonction du contenu.

Quelle est également la bonne façon d'étendre Bootstrap?

Vous pouvez également utiliser la .btn-blockclasse sur le bouton, afin qu'elle s'étende à la largeur du parent.

Si le parent est un élément de largeur fixe, le bouton s'agrandira pour prendre toute la largeur. Vous pouvez appliquer un balisage existant au conteneur pour vous assurer que les boutons fixes / fluides occupent uniquement l'espace requis.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Pour ce faire, vous pouvez créer une largeur que vous jugez appropriée pour les deux boutons, puis créer une classe personnalisée avec la largeur et l'ajouter à vos boutons comme ceci:

CSS

.custom {
    width: 78px !important;
}

Je peux ensuite utiliser cette classe et l'ajouter aux boutons comme ceci:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

Démo: http://jsfiddle.net/yNsxU/

Vous pouvez prendre cette classe personnalisée que vous créez et la placer dans votre propre feuille de style, que vous chargez après la feuille de style bootstrap. Nous faisons cela parce que toutes les modifications que vous placez dans la feuille de style bootstrap peuvent être accidentellement perdues lorsque vous mettez à jour le framework, nous voulons également que vos modifications aient la priorité sur les valeurs par défaut.

Si vous placez vos boutons à l'intérieur d'un div avec la classe "btn-group", les boutons à l'intérieur s'étireront à la même taille que le plus grand bouton.

par exemple:

<div class="btn-group">
  <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> 

Groupes de boutons Bootstrap

Pour vos boutons, vous pouvez créer un autre sélecteur CSS pour ces classes spéciales de boutons avec une largeur minimale et une largeur maximale spécifiées. Donc, si votre bouton est

<button class="save_button">Save</button>

Dans votre fichier CSS Bootstrap, vous pouvez créer quelque chose comme

.save_button {
    min-width: 80px;
    max-width: 80px;
}

De cette façon, il devrait toujours rester 80px même si vous avez un design réactif.

En ce qui concerne la bonne façon d'étendre Bootstrap, jetez un œil à ce fil:

Extension de Bootstrap

Avec BS 4, vous pouvez également utiliser le dimensionnement et appliquer w-100 afin que le bouton puisse occuper toute la largeur du conteneur parent.

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

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

Expansion de la réponse @ kravits88:

Cela étendra les boutons pour s'adapter à toute la largeur:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

btn-group-justifié et btn-group ne fonctionnent que pour le contenu statique mais pas sur les boutons créés dynamiquement, et corrigé avec un bouton en css n'est pas pratique car il reste sur la même largeur même tout le contenu est court.

Ma solution: mettre la même classe dans un groupe de boutons puis boucler sur chacun d'eux, obtenir la largeur du bouton le plus long et l'appliquer à tous

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Un bouton de largeur de bloc peut facilement devenir un bouton réactif si le conteneur parent est réactif. Je pense que l'utilisation d'une combinaison d'une largeur fixe et d'un chemin de sélecteur plus détaillé au lieu de! Important car:

1) Ce n'est pas un hack (régler la largeur min et la largeur maximale de la même manière est cependant hacky)

2) N'utilise pas la balise! Important, ce qui est une mauvaise pratique

3) Utilise la largeur et sera donc très lisible et quiconque comprend comment fonctionne la cascade en CSS verra ce qui se passe (peut-être laisser un commentaire CSS à ce sujet?)

4) Combinez vos sélecteurs qui s'appliquent à votre nœud ciblé pour une précision accrue

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Je viens de rencontrer le même besoin et n'a pas été satisfait de définir une largeur fixe.

Alors je l'ai fait avec jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Le meilleur moyen de résoudre votre problème est d'utiliser le bloc de boutons btn-block avec la largeur de colonne souhaitée.

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


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Ici, j'ai trouvé une solution en comparant les boutons dans un élément de groupe de boutons. La solution simple consiste à obtenir celui avec la plus grande largeur et à définir la largeur des autres boutons. Ainsi, ils peuvent avoir une largeur égale.

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

Ça a marché comme sur des roulettes.

Cela peut être une solution idiote, mais je cherchais une solution à ce problème et je suis devenu paresseux.

Quoi qu'il en soit, utiliser input class = "btn ..." ... au lieu de button et remplir l'attribut value = avec des espaces pour qu'ils aient tous la même largeur fonctionne plutôt bien.

par exemple :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

Je n'utilise pas bootstrap depuis si longtemps, et il y a peut-être une bonne raison de ne pas utiliser cette approche, mais j'ai pensé que je pourrais aussi bien partager