wake-up-neo.com

Wie kann ich die Größe einer Bootstrap-Schaltfläche erhöhen?

Zum Beispiel habe ich meinen Button gemacht

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

und es sieht wie folgt aus

 enter image description here

Allerdings möchte ich meinen Button so haben

 enter image description here

Wie kann ich die Breite der Bootstrap-Schaltfläche unabhängig von der Textgröße vergrößern?

htmlcsstwitter-bootstraptwitter-bootstrap-3
18
Alexander Shmatko

Sie können versuchen, die Klassen btn-sm, btn-xs und btn-lg wie folgt zu verwenden:

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

JSFIDDLE DEMO

Sie können die Bootstrap-Klasse .btn-group-justified css verwenden. Oder Sie können einfach hinzufügen:

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

JSFIDDLE DEMO

16
Rahul Tripathi

bootstrap wird mit clas btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing geliefert

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

wenn Sie jedoch die Schaltfläche der Breite Ihrer Spalte/Ihres Containers haben möchten, fügen Sie einen Btn-Block hinzu

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

Dies wird jedoch auf 100% erweitert, sodass Sie den Button in bestimmte Spalten einfassen können, z. dann wissen Sie, dass es immer 3 Spalten bleibt, bis xs Bildschirm angezeigt wird

<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

Standardmäßige Bootstrap-Größenklassen

Sie können die Klassen btn-lg, btn-sm und btn-xs verwenden, um die Größe zu ändern.

btn-block

Es gibt auch eine Klasse btn-block, die Ihre Schaltfläche auf den gesamten Block erweitert. Dies ist sehr praktisch in Kombination mit dem Bootstrap-Gitter.
Zum Beispiel zeigt dieser Code eine Schaltfläche mit der Breite, die der Hälfte des Bildschirms für mittlere und große Bildschirme entspricht. und zeigt eine Schaltfläche mit voller Breite für kleine Bildschirme:

<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>

Überprüfen Sie dieses JSFiddle aus. Versuchen Sie, die Bildgröße zu ändern.

Wenn es nicht genug ist, können Sie leicht Ihre benutzerdefinierte Klasse erstellen.

4
Yeldar Kurmangaliyev

Verwenden Sie Schaltflächen auf Blockebene, die sich über die gesamte Breite eines übergeordneten Elements erstrecken. Sie können dies erreichen, indem Sie dem Schaltflächenelement die Klasse btn-block hinzufügen.

Dokumentation hier

1
Navas Basheer