Ich verwende Bootstrap und möchte ein Ganzes so einstellen btn-group
, dass es eine Breite von 100% des übergeordneten Elements hat. Ich möchte auch, dass die inneren Tasten gleich breit sind. So wie es ist, kann ich es auch nicht erreichen.
Ich habe hier eine JSFiddle erstellt: http://jsfiddle.net/BcQZR/12/
Hier ist der HTML:
<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>
Und hier ist mein aktuelles CSS, das nicht funktioniert:
#colours {
width: 100%;
}
quelle
Bootstrap hat die
.btn-group-justified
CSS-Klasse.Die Struktur hängt von der Art der verwendeten Tags ab.
Mit
<a>
Tags<div class="btn-group btn-group-justified" role="group" aria-label="..."> ... </div>
Mit
<button>
Tags<div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div>
quelle
.btn-group-justified
einen Unterschied gibt, wie Sie es basierend auf entweder<a>
und<button>
Tags getbootstrap.com/components/#with- <a> -elements.btn
in ein einwickeln müssen.btn-group
?Es ist kein zusätzliches CSS
.btn-group-justified
erforderlich. Die Klasse erledigt dies.Sie müssen dies dem übergeordneten Element hinzufügen und dann jedes BTN-Element in ein Div mit der folgenden .btn-Gruppe einschließen
<div class="form-group"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button> </div> <div class="btn-group"> <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button> </div> </div> </div>
quelle
<div class="btn-group" style="width: 80%">
<div class="btn-group" style="width: 20%">
80 bis 20.Die Lösung der Einstellungsbreiten für .btn gefällt mir nicht, da davon ausgegangen wird, dass die .btn-Gruppe immer die gleiche Anzahl von Elementen enthält. Dies ist eine fehlerhafte Annahme und führt zu aufgeblähtem, präsentationsspezifischem CSS.
Eine bessere Lösung besteht darin, die Anzeige von .btn-Gruppen mit .btn-Block und untergeordneten .btn (s) zu ändern. Ich glaube, das ist es, wonach Sie suchen:
.btn-group.btn-block { display: table; } .btn-group.btn-block > .btn { display: table-cell; }
Hier ist eine Geige: http://jsfiddle.net/DEwX8/123/
Wenn Sie Schaltflächen mit gleicher Breite (innerhalb eines angemessenen Rahmens) bevorzugen und nur Browser unterstützen möchten, die Flexbox unterstützen, versuchen Sie stattdessen Folgendes:
.btn-group.btn-block { display: flex; } .btn-group.btn-block > .btn { flex: 1; }
Hier ist eine Geige: http://jsfiddle.net/DEwX8/124/
quelle
.btn-group-justified
Für Bootstrap 4 fügen Sie einfach diese Klasse hinzu:
w-100
quelle
Bootstrap 4 entfernt .btn-group-gerechtfertigt. Als Ersatz können Sie
<div class="btn-group d-flex" role="group"></div>
Elemente mit .w-100 als Wrapper verwenden.Versuche dies:
<div class="btn-group d-flex" role="group> <button type="button" class="btn btn-primary w-100">Submit</button> <button type="button" class="btn btn-primary w-100">Cancel</button> </div>
quelle
Winkelig - gleicher Breite
Angenommen, Sie haben eine Reihe von "Dingen" in Ihrem Bereich ...
<div class="btn-group" style="width: 100%;"> <button ng-repeat="thing in things" class="btn btn-default" ng-style="{width: (100/things.length)+'%'}"> {{thing}} </button> </div>
quelle
<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.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group btn-block"> <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs btn-block dropdown-toggle">Actions <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>
quelle
Bootstrap 4
<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
quelle
Bootstrap 4-Lösung
<div class="btn-group w-100"> <button type="button" class="btn">One</button> <button type="button" class="btn">Two</button> <button type="button" class="btn">Three</button> </div>
Grundsätzlich
btn-group
weisen Sie den Container an, eine Breite von 100% zu haben, indem Sie ihm einew-100
Klasse hinzufügen . Die Schaltflächen im Inneren füllen automatisch den gesamten Bereich aus.quelle