Schaltflächen mit fester Breite mit Bootstrap

Unterstützt Bootstrap Schaltflächen mit fester Breite? Wenn ich derzeit zwei Schaltflächen habe, "Speichern" und "Herunterladen", ändert sich die Schaltflächengröße je nach Inhalt.

Was ist auch der richtige Weg, um Bootstrap zu erweitern?

Sie können die .btn-blockKlasse auch für die Schaltfläche verwenden, sodass sie auf die Breite des übergeordneten Elements erweitert wird.

Wenn das übergeordnete Element ein Element mit fester Breite ist, wird die Schaltfläche erweitert, um die gesamte Breite zu übernehmen. Sie können vorhandene Markups auf den Container anwenden, um sicherzustellen, dass feste / flüssige Tasten nur den erforderlichen Platz einnehmen.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Dazu können Sie eine Breite erstellen, die für beide Schaltflächen in Ordnung ist, und dann eine benutzerdefinierte Klasse mit der Breite erstellen und wie folgt zu Ihren Schaltflächen hinzufügen:

CSS

.custom {
    width: 78px !important;
}

Ich kann diese Klasse dann verwenden und sie wie folgt zu den Schaltflächen hinzufügen:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

Demo: http://jsfiddle.net/yNsxU/

Sie können die von Ihnen erstellte benutzerdefinierte Klasse in Ihr eigenes Stylesheet einfügen, das Sie nach dem Bootstrap-Stylesheet laden. Wir tun dies, weil alle Änderungen, die Sie im Bootstrap-Stylesheet vornehmen, versehentlich verloren gehen, wenn Sie das Framework aktualisieren. Außerdem möchten wir, dass Ihre Änderungen Vorrang vor den Standardwerten haben.

Wenn Sie Ihre Schaltflächen in einem Div mit der Klasse "btn-group" platzieren, werden die Schaltflächen im Inneren auf die gleiche Größe wie die größte Schaltfläche gedehnt.

z.B:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

Bootstrap-Schaltflächengruppen

Für Ihre Schaltflächen können Sie einen weiteren CSS-Selektor für diese speziellen Klassen von Schaltflächen mit einer angegebenen minimalen und maximalen Breite erstellen. Also wenn dein Knopf ist

<button class="save_button">Save</button>

In Ihrer Bootstrap-CSS-Datei können Sie so etwas wie erstellen

.save_button {
    min-width: 80px;
    max-width: 80px;
}

Auf diese Weise sollte es immer 80px bleiben, auch wenn Sie ein ansprechendes Design haben.

Schauen Sie sich diesen Thread an, um den richtigen Weg zur Erweiterung von Bootstrap zu finden:

Bootstrap erweitern

Mit BS 4 können Sie auch die Größe verwenden und w-100 anwenden, sodass die Schaltfläche die gesamte Breite des übergeordneten Containers einnehmen kann.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

Erweitern @ kravits88 Antwort:

Dadurch werden die Tasten auf die gesamte Breite gedehnt:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

btn-group-gerechtfertigt und btn-group funktionieren nur für statischen Inhalt, jedoch nicht für dynamisch erstellte Schaltflächen. Die Korrektur mit der Schaltfläche in CSS ist nicht praktikabel, da sie auf der gleichen Breite bleibt, selbst wenn alle Inhalte kurz sind.

Meine Lösung: Platzieren Sie dieselbe Klasse in einer Gruppe von Schaltflächen, und führen Sie dann eine Schleife für alle aus, ermitteln Sie die Breite der längsten Schaltfläche und wenden Sie sie auf alle an

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Eine Blockbreitentaste kann leicht zu einer reaktionsfähigen Schaltfläche werden, wenn der übergeordnete Container reagiert. Ich denke, dass die Verwendung einer Kombination aus einer festen Breite und einem detaillierteren Auswahlpfad anstelle von! Wichtig ist, weil:

1) Es ist kein Hack (die Einstellung von Min-Breite und Max-Breite ist jedoch hackig)

2) Verwendet nicht das! Wichtige Tag, was eine schlechte Praxis ist

3) Verwendet die Breite, ist also sehr gut lesbar und jeder, der versteht, wie Kaskadierung in CSS funktioniert, wird sehen, was los ist (vielleicht einen CSS-Kommentar dazu hinterlassen?)

4) Kombinieren Sie Ihre Selektoren, die für eine höhere Genauigkeit für Ihren Zielknoten gelten

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Kam gerade auf das gleiche Bedürfnis und war nicht zufrieden mit der Definition der festen Breite.

So war es auch mit jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Der beste Weg zur Lösung Ihres Problems ist die Verwendung des Schaltflächenblocks btn-block mit der gewünschten Spaltenbreite.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Hier habe ich eine Lösung gefunden, indem ich Schaltflächen in einem Schaltflächengruppenelement verglichen habe. Die einfache Lösung besteht darin, die mit der größten Breite zu ermitteln und die Breite auf die anderen Schaltflächen einzustellen. Sie können also gleich breit sein.

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

Es funktionierte wie ein Zauber.

Dies mag eine dumme Lösung sein, aber ich suchte nach einer Lösung für dieses Problem und wurde faul.

Wie auch immer, die Verwendung von input class = "btn ..." ... anstelle von button und das Auffüllen des Attributs value = mit Leerzeichen, sodass alle die gleiche Breite haben, funktioniert ziemlich gut.

z.B :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

Ich habe Bootstrap noch nicht so lange verwendet, und vielleicht gibt es einen guten Grund, diesen Ansatz nicht zu verwenden, aber ich dachte, ich könnte es genauso gut teilen