Faire passer le bouton sur toute sa largeur?

276

Je veux qu'un bouton 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?

— user1438003
source

2

Quelle colonne? Où est le CSS?

— JJJ

J'utilise donc Twitter-bootstrap

— user1438003

1

As-tu essayé style="width:100%"? Ou mettre ça dans une de tes classes?

— Lee Taylor

2

C'est peut-être parce qu'il a une marge ou que la colonne a un remplissage.

— Ohad

4

La btn-blockclasse fonctionne pour moi comme vous vous y attendez en BS3

— fguillen

826

Bootstrap v3 et v4

Utilisez la btn-blockclasse sur votre bouton / élément

Bootstrap v2

Utilisez la input-block-levelclasse sur votre bouton / élément

— Layke
source

13

Pour les groupes de boutons, vous devrez également les ajouter btn-blockau btn-groupwrapper.

— Jesse

1

testé avec bootstrap V3 et "btn-block" a fonctionné pour moi

— Buddhika Alwis

j'utilise la même chose mais ne développe pas <div class = "btn-group"> <button id = "btnSearch" class = "btn-block"> Recherche </button> </div>

— Samra

Vive mec! ce doit être la réponse

— Nicholas

39

Pourquoi ne pas utiliser la classe prédéfinie Bootstrap input-block-levelqui 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 ^ .

— CodeAngry
source

2

@fguillen N'utilise plus BS mais essaie la form-controlclasse. Il semble que les choses soient 100% larges dans les échantillons.

— CodeAngry

@CodeAngry juste curieux, comment se fait-il que vous n'utilisiez plus BS (à part la colère possible du code;)?

— K. Kilian Lindberg

2

@CarlLindberg J'ai roulé le mien! BS bon pour un revirement rapide mais ... ça ne se démarque pas.

— CodeAngry

1

@CodeAngry, c'est cool que vous ayez roulé votre propre framework - mais cela peut valoir la peine d'utiliser le thème-roller - de toute façon, les accessoires pour faire votre propre truc!

— Cody

Depuis bs4, la réponse de @Layke semble plus à jour et couvre les bs 2, 3 et 4. Aucune des options ci-dessus n'a fait quoi que ce soit d'utile pour moi sur bs4. Excusez-vous d'être bavard avec cela, mais la réponse acceptée ne semble pas une bonne idée et celle-ci semble obsolète.

— JL Peyret

26

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>

— syn
source

1

C'est la façon de le faire avec btn-lg. le contrôle de formulaire ne fonctionne pas.

— Mark Swardstrom

14

Bootstrap 4.1+

utilisation col-12, btn-block, w-100ouform-control

<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">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

Développer l'extrait

— WasiF
source

12

utilisation

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

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

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

— noel
source

1

La question portait sur les boutons et non sur les btn-groups, il y a une réponse plus acceptée faisant référence à la btn-blockclasse de Layke.

— Hans

9

Vous devez 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 ajouter 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.

— Kenny Bania
source

J'ai corrigé une faute de frappe dans mon code, aurait dû être div au lieu de span dans l'entrée CSS supérieure. Pouvez-vous confirmer que les styles sont appliqués? La largeur du bouton change-t-elle du tout?

— Kenny Bania

6

btn-blockest l'attribut qui m'a sauvé! J'arrachais mes cheveux .. Maintenant, je reviens en arrière et recherche twitter.github.io/bootstrap/base-css.html#buttons , cet attribut a été documenté là-bas - doh;)

— GONeale

6

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

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

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

— Nu comme un ver
source

5

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

Dans Bootstrap 3, cela devrait être tout ce dont vous avez besoin. Je crois que cela btn-largedépassait la largeur de btn-block.

— kim3er
source

1

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 un pixel dans le CSS ou si vous le souhaitez en utilisant réactif une valeur de pourcentage.

— skoepp
source