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?
css
twitter-bootstrap
aWebDeveloper
quelle
quelle
Antworten:
Sie können die
.btn-block
Klasse 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.
Code-Snippet anzeigen
quelle
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
Ich kann diese Klasse dann verwenden und sie wie folgt zu den Schaltflächen hinzufügen:
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.
quelle
em
Einheiten anstelle von Pixeln. Sie helfen Ihnen dabei, die Breite nachWenn 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:
Bootstrap-Schaltflächengruppen
quelle
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
In Ihrer Bootstrap-CSS-Datei können Sie so etwas wie erstellen
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
quelle
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.
Code-Snippet anzeigen
quelle
Erweitern @ kravits88 Antwort:
Dadurch werden die Tasten auf die gesamte Breite gedehnt:
quelle
btn-group-justified
ist die Schlüsselklasse. Siehe die Dokumentation hier: getbootstrap.com/docs/3.3/components/…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
quelle
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
quelle
Kam gerade auf das gleiche Bedürfnis und war nicht zufrieden mit der Definition der festen Breite.
So war es auch mit jquery:
quelle
Der beste Weg zur Lösung Ihres Problems ist die Verwendung des Schaltflächenblocks btn-block mit der gewünschten Spaltenbreite.
quelle
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.
Es funktionierte wie ein Zauber.
quelle
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 :
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
quelle
<button>
Tag verwenden
, müssen Sie beispielsweise Folgendes verwenden :<button type="button" class="btn btn-default"> Edit </button>
.