Boutons à largeur fixe avec Bootstrap

Question

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

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

Answer 1

Btn-group-justified et btn-group ne fonctionnent que pour le contenu statique mais pas pour les boutons créés dynamiquement, et la fixation du bouton en css n'est pas pratique car il reste à la même largeur même si tout le contenu est court.

Ma solution : mettre la même classe à un groupe de boutons puis boucler sur tous les boutons, 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);

Answer 2

Expansion de la réponse de @kravits88 :

Cela permettra d'étirer les boutons pour les 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>

Answer 3

Un bouton en largeur de bloc pourrait 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 (définir une largeur minimale et maximale identique est cependant un hack)

2) Il n'utilise pas la balise !important, ce qui est une mauvaise pratique.

3) Utilise la largeur, donc sera très lisible et toute personne qui comprend le fonctionnement de la cascade en CSS verra ce qui se passe (peut-être laisser un commentaire CSS pour cela ?).

4) Combinez vos sélecteurs qui s'appliquent au nœud ciblé pour une meilleure précision.

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

Answer 4

Je viens de rencontrer le même besoin et je n'étais pas satisfait de la définition de la largeur fixe.

C'est ce qui s'est passé 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>

Answer 5

La meilleure façon 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>