web-dev-qa-db-fra.com

Faire en sorte que le bouton aille pleine largeur?

Je veux un bouton qui occupe toute la largeur de la colonne, mais ayant des difficultés ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

Comment rendre le bouton aussi large que la colonne?

csstwitter-bootstraphtmlresponsive-design
260
user1438003

Bootstrap v3 et v4

Utilisez btn-block class sur votre bouton/élément

Bootstrap v2

Utilisez input-block-level class sur votre bouton/élément

793
Layke

Pourquoi ne pas utiliser le Bootstrap classe prédéfinie input-block-level qui fait le travail? 

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

En savoir plus ici dans la section Contrôle du dimensionnement ^ .

39
CodeAngry

J'ai simplement utilisé ceci:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
23
syn

utilisation

<div class="btn-group btn-group-justified">
  ...
</div>

mais cela ne fonctionne que pour les éléments <a> et non les éléments <button>.

voir: http://getbootstrap.com/components/#btn-groups-justified

12
noel

Bootstrap 4.1.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             Full Width Button
         </button>
     </div>
</div>
9
WasiF

Vous devriez ajouter ces styles à une feuille CSS

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

Puis changez ajoute les classes à votre code

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

Je n'ai pas testé cela et je ne suis pas sûr à 100% de ce que vous voulez, mais je pense que cela vous rapprochera.

8
Kenny Bania

J'aurais pensé que ce serait la façon la plus bootstrap-esque de faire les choses:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

Tout ce que je fais est d'ajouter la classe col-xs-12 au bouton.

6
Starkers
<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

Dans Bootstrap 3, cela devrait suffire. Je crois que btn-large annulait la largeur de btn-block.

5
kim3er

La largeur du bouton est définie par le texte du bouton. Donc, si vous souhaitez définir la largeur du bouton, vous pouvez utiliser une largeur définie en utilisant pixel dans le fichier css ou si vous souhaitez utiliser une valeur en pourcentage avec responsive.

1
skoepp