web-dev-qa-db-fra.com

Boutons à largeur fixe avec Bootstrap

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

Aussi, quel est le bon moyen d'étendre Bootstrap?

csscss3twitter-bootstrap
145
aWebDeveloper

Vous pouvez également utiliser la classe .btn-block sur le bouton, de sorte qu'elle s'agrandisse à la largeur du parent.

Si le parent est un élément de largeur fixe, le bouton se développera pour prendre toute la largeur. Vous pouvez appliquer des balises existantes 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>

266
Kami

Pour ce faire, vous pouvez définir une largeur que vous jugez correcte pour les deux boutons, puis créez une classe personnalisée avec la largeur et ajoutez-la à vos boutons comme suit:

CSS

.custom {
    width: 78px !important;
}

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

<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 d'amorçage. Nous faisons cela parce que toutes les modifications que vous apportez dans la feuille de style d'amorçage risquent d'être accidentellement perdues lors de la mise à jour du framework. Nous souhaitons également que vos modifications soient prioritaires sur les valeurs par défaut.

55
Andres Ilich

Si vous placez vos boutons dans une div de classe "btn-group", les boutons à l'intérieur s'étireront à la même taille que le plus gros 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

33
kravits88

Pour vos boutons, vous pouvez créer un autre sélecteur CSS pour les classes spéciales de boutons avec une largeur minimale et une largeur maximales 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 l'extension correcte de Bootstrap, jetez un coup d'œil à ce fil de discussion:

Extending Bootstrap

12
Marc

Avec BS 4, vous pouvez également utiliser sizing et appliquer w-100 pour 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>

2
Prakash G. R.

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 de largeur fixe et de chemin de sélecteur plus détaillé au lieu de! Important car:

1) Ce n'est pas un hack (les réglages min-width et max-width sont identiques) 

2) N'utilise pas le tag! Important, ce qui est une mauvaise pratique

3) Utilise la largeur, il sera donc très lisible et quiconque comprendra le fonctionnement en cascade en CSS verra ce qui se passe (laissez peut-être un commentaire CSS pour cela?)

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;
}
1
Alpha G33k

Expansion @ kravits88 réponse:

Cela va étirer 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>
1
Bhojendra Rauniyar

Je viens de rencontrer le même besoin et je ne me suis pas contenté de définir une largeur fixe. 

Ainsi l'a 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>

0
Andres Velasco Garcia

Ici, j'ai trouvé une solution en comparant des boutons dans un élément de groupe de boutons. La solution simple consiste à obtenir celui dont la largeur est la plus grande et à définir la largeur des autres boutons. Donc, 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.

0
sulhadin

btn-group-driven et btn-group fonctionnent uniquement pour le contenu statique, mais pas pour les boutons créés dynamiquement. Fixé avec le 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 les parcourir en boucle, 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);

 Sample output here

0
Dards

Le meilleur moyen de résoudre votre problème consiste à 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>

0
A Sonik