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

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

Si le parent est un élément à largeur fixe, le bouton s'étendra sur toute la largeur. Vous pouvez appliquer des balises existantes au conteneur pour vous assurer que les boutons fixes/fluides n'occupent que 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>

Answer 2

Pour ce faire, vous pouvez définir une largeur qui vous semble correcte pour les deux boutons, puis créer une classe personnalisée avec cette largeur et l'ajouter à 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émonstration : 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 du bootstrap. En effet, les modifications apportées à la feuille de style bootstrap risquent d'être accidentellement perdues lors de la mise à jour du framework. Nous souhaitons également que vos modifications aient la priorité sur les valeurs par défaut.

Answer 3

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.

eg :

<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

Answer 4

Pour vos boutons, vous pouvez créer un autre sélecteur CSS pour ces classes spéciales de boutons avec une largeur minimale et maximale spécifiée. Ainsi, 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 coup d'œil à ce fil de discussion :

Extension de Bootstrap

Answer 5

Avec BS 4, vous pouvez également utiliser le Dimensionnement et appliquez 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>