Wie erhöhe ich die Größe der bootstrap-button?

Beispiel: ich habe mir eine Schaltfläche

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

und es sieht wie folgt aus

Wie erhöhe ich die Größe der bootstrap-button?

Aber ich würde gerne meine button wie dieser

Wie erhöhe ich die Größe der bootstrap-button?

Wie kann ich vergrößern, die Breite der bootstrap-Taste, unabhängig von der Schriftgröße?

Es gibt btn-xs, btn-sm und btn-lg Klassen für control-Taste Größe.
Die Größe auf die Schaltfläche definiert ist, die durch bootstrap-css mit dieser Regel .btn padding: 6px 12px; überschreiben die Regel oder eine neue Regel hinzufügen, und passen Sie Ihren Bedürfnissen

InformationsquelleAutor Alexander Shmatko | 2015-09-30

  1. 15

    Können Sie versuchen, zu verwenden btn-sm, btn-xs und btn-lg-Klassen wie diese:

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

    JSFIDDLE DEMO

    Können Sie Gebrauch machen von Bootstrap .btn-group-justified css-Klasse. Oder Sie können einfach fügen Sie hinzu:

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

    JSFIDDLE DEMO

    InformationsquelleAutor Rahul Tripathi

  2. 8

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

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

    aber wenn Sie wollen, um die Schaltfläche, der Sie die Breite der Spalte /container hinzufügen btn-block

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

    Jedoch dadurch erweitert sich zu 100% so machen surt ethat Sie wickeln Sie Ihre Schaltfläche in bestimmten Anzahl der Spalten, z.B., dann Sie wissen, Ihr bleibt immer 3 Spalten, bis xs-Bildschirm

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

    InformationsquelleAutor Daniel Ploskonka

  3. 7
    you can add css property for button size as follow

.btn{min-width:250px;}

    InformationsquelleAutor Navtosh Adhikari

  4. 4

    Standard-Bootstrap-Klassen

    Können Sie btn-lg, btn-sm und btn-xs Klassen für die Manipulation mit Ihrer Größe.

    btn-block

    Da gibt es auch eine Klasse btn-block wird erweitern Sie Ihre Schaltfläche, um den ganzen block. Es ist sehr praktisch in Kombination mit Bootstrap grid.

    Zum Beispiel, dieser code wird eine Schaltfläche mit der Breite gleich der Hälfte des Bildschirms für mittlere und große Bildschirme, und zeigt eine full-width-Taste 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 dieses JSFiddle aus. Versuchen, die Größe Rahmen.

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

    InformationsquelleAutor Yeldar Kurmangaliyev

  5. 1

    Verwenden Sie block-level-Tasten, diejenigen, die sich über die volle Breite des übergeordneten
    Dies erreichen Sie durch hinzufügen btn-block Klasse button-element.

    Dokumentation hier

    InformationsquelleAutor Navas Basheer

Schreibe einen Kommentar