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

Ici, j'ai trouvé une solution en comparant les boutons dans un élément button-group. La solution simple est d'obtenir celui qui a la plus grande largeur et de 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.

Answer 2

C'est peut-être une solution stupide, mais je cherchais une solution à ce problème et j'ai eu la flemme.

Quoi qu'il en soit, l'utilisation d'input class="btn..." ... au lieu de bouton et le remplissage de l'attribut value= avec des espaces pour qu'ils aient tous la même largeur fonctionnent assez bien.

eg :

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

Je n'utilise pas bootstrap depuis très 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 la partager