web-dev-qa-db-fra.com

Comment puis-je augmenter la taille d'un bouton d'amorçage?

Par exemple j'ai fait mon bouton

<div class="btn btn-default">
  Active
</div>

et il ressemble à ce qui suit

 enter image description here

Cependant, j'aimerais avoir mon bouton comme ça

 enter image description here

Comment puis-je agrandir la largeur du bouton de démarrage indépendamment de la taille du texte?

htmlcsstwitter-bootstraptwitter-bootstrap-3
18
Alexander Shmatko

Vous pouvez essayer d'utiliser les classes btn-sm, btn-xs et btn-lg comme ceci:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

JSFIDDLE DEMO

Vous pouvez utiliser la classe Bootstrap .btn-group-justified css. Ou vous pouvez simplement ajouter:

.btn-xl {
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
    width:50%;    //Specify your width here
}

JSFIDDLE DEMO

16
Rahul Tripathi

bootstrap est fourni avec la classe btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing

<div class="btn btn-default btn-block">
  Active
</div>

mais si vous voulez avoir le bouton de la largeur de votre colonne/conteneur, ajoutez btn-block

<div class="btn btn-default btn-lg">
      Active
    </div>

Cependant, cela augmentera à 100% alors assurez-vous que vous allez emballer votre bouton dans un certain nombre de colonnes, par exemple. alors vous savez qu'il reste toujours 3 colonnes jusqu'à l'écran xs

<div class="col-sm-3">
             <div class="btn btn-default btn-block">
          Active
            </div>
        </div>
9
Daniel
you can add css property for button size as follow

.btn{min-width:250px;}
7
Navtosh Adhikari

Classes de taille Bootstrap par défaut

Vous pouvez utiliser les classes btn-lg, btn-sm et btn-xs pour manipuler sa taille.

btn-block

En outre, il existe une classe btn-block qui étendra votre bouton à l’ensemble du bloc. C'est très pratique en combinaison avec la grille Bootstrap.
Par exemple, ce code affichera un bouton de largeur égale à la moitié de l’écran pour les écrans moyens et grands; et montrera un bouton pleine largeur pour les petits écrans:

<div class="container">
    <div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
        <button class="btn btn-group">Click me!</button>
    </div>
</div>

Vérifiez ce JSFiddle out. Essayez de redimensionner le cadre.

Si cela ne suffit pas, vous pouvez facilement créer votre classe personnalisée.

4
Yeldar Kurmangaliyev

Utilisez des boutons de niveau bloc, ceux qui couvrent toute la largeur d'un parent. Vous pouvez y parvenir en ajoutant btn-block class votre élément button.

Documentation ici

1
Navas Basheer