Schaltflächen mit fester Breite mit Bootstrap

180

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?

aWebDeveloper
quelle
Mit fester Breite meinen Sie, dass es nicht mit dem Inhalt darin wächst? Die Schaltflächen sind nur durch den darin enthaltenen Text begrenzt.
Andres Ilich
@AndresIlich Derzeit Wenn ich 2 Schaltflächen "Speichern" und "Herunterladen" habe, ändert sich die Schaltflächengröße je nach Inhalt
aWebDeveloper
Sie möchten also, dass diese beiden Schaltflächen mit der gleichen Breite korrekt sind?
Andres Ilich

Antworten:

316

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>

Kami
quelle
71

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.

Andres Ilich
quelle
2
Verwenden Sie emEinheiten anstelle von Pixeln. Sie helfen Ihnen dabei, die Breite nach
Zeichenlänge festzulegen
2
@ DanDascalescu ~ 2 Jahre später bin ich anderer Meinung. Der Autor ist möglicherweise nicht nach dem Erweitern der Schaltflächen, um das gesamte übergeordnete Element auszufüllen, möglicherweise die halbe Seite für eine Schaltfläche mit der Aufschrift "Speichern". Ich würde so etwas empfehlen, aber bei Bedarf mit Medienanfragen. Es gibt immer Javascript, um sie so groß wie den größten Knopf zu machen. Dies ist normalerweise ein Weg, von dem ich mich fern
Jacob McKay
38

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

kravits88
quelle
@tonjo: Kannst du näher erläutern, warum es nicht funktioniert? Ich habe festgestellt, dass dies tatsächlich der Fall ist - siehe zum Beispiel die vertikale Variation .
Dan Dascalescu
2
Ich versuche, die gleiche Funktionalität zu erreichen, und der obige Code funktioniert auch bei mir nicht. @ DanDascalescu hast du einen anderen Weg gefunden?
GelatinFox
1
Die Tasten müssen auch von Klasse BTN-Block sein, damit dies funktioniert, zumindest für mich.
Gabriel
5
Nein, das funktioniert nicht - die Tasten sind nicht gleich groß.
Antoniossss
Ich habe einen zusätzlichen linken Rand hinzugefügt, weil ich wollte, dass die Schaltflächen getrennt werden. Hat perfekt funktioniert. Bei gleicher Breite.
Tomas Gonzalez
13

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

Marc
quelle
4

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.

Prakash GR
quelle
3

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>
Bhojendra Rauniyar
quelle
Dies ist die richtige Antwort für Bootstrap 3.3. btn-group-justifiedist die Schlüsselklasse. Siehe die Dokumentation hier: getbootstrap.com/docs/3.3/components/…
CXJ
3

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

Beispielausgabe hier

Dards
quelle
1

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;
}
Alpha G33k
quelle
0

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>

Andres Velasco Garcia
quelle
0

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>

Ein Sonik
quelle
0

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.

Sulhadin
quelle
-4

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

IDunno442
quelle
Wenn Sie die verwenden <button> Tag verwenden &nbsp;, müssen Sie beispielsweise Folgendes verwenden : <button type="button" class="btn btn-default">&nbsp;Edit&nbsp;</button>.
Endy Tjahjono
Dies würde in meinem Fall nicht funktionieren <a class="btn btn-default btn-sm" href="read.php?id='.$row['id'‹.'"> Bearbeiten </a>
Mina Gabriel