Stellen Sie die Breite einer Schaltflächengruppe auf 100% ein und machen Sie die Schaltflächen gleich breit?


71

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%;
}

Antworten:


22

BOOTSTRAP 2 ( Quelle )

Das Problem ist, dass für die Schaltflächen keine Breite festgelegt ist. Versuche dies:

.btn {width:20%;}

BEARBEITEN:

Standardmäßig nehmen die Schaltflächen eine automatische Breite ihrer Textlänge plus etwas Polsterung an. In Ihrem Beispiel sind es wahrscheinlich eher 14,5% für 5 Schaltflächen (um das Auffüllen zu kompensieren).

Hinweis:

Wenn Sie nicht versuchen möchten, die Polsterung zu kompensieren, können Sie sie verwenden box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp


Getan! (Ich musste nur 5 Minuten warten, bis SO mich akzeptieren ließ.) Nochmals vielen Dank.
Richard

2
Überprüfen Sie die CSS3-Regel "Flex"!
mr_app

2
@andersoyvind Danke für die Info, aber ich bin nicht vollständig auf w3fools.com verkauft. Ich habe Box-Sizing verwendet: Border-Box; Ich weiß also, dass es funktioniert und dass die auf dieser Seite aufgeführten Syntaxen / Informationen korrekt sind. Denken Sie daran, dass jeder Code, der Seiten dokumentiert, fehleranfällig ist. Der beste Weg, um festzustellen, ob er funktioniert, besteht darin, ihn zu testen.
Kris Hollenbeck

Was ist, wenn Sie die Anzahl der Tasten vorher nicht kennen?
CDT

@CDT, Sie könnten wahrscheinlich jetzt Flex Tage verwenden. Vorausgesetzt, Sie müssen ältere IE-Versionen nicht unterstützen. OregonJeff hat ein Beispiel für Flexibilität in seiner Antwort.
Kris Hollenbeck

154

Bootstrap hat die .btn-group-justifiedCSS-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>

6
Ein Beispiel könnte nützlich sein.
Rafael Herscovici

2
Es ist wichtig darauf hinzuweisen, dass es bei der Verwendung .btn-group-justifiedeinen Unterschied gibt, wie Sie es basierend auf entweder <a>und <button>Tags getbootstrap.com/components/#with- <a> -elements
Cesar Bielich

4
Dies sollte definitiv die akzeptierte Antwort sein. Wissen Sie, warum wir jedes .btnin ein einwickeln müssen .btn-group?
Gabriel

Das habe ich gesucht, danke. Wenn wir die Breite ändern, wird die Reaktionsfähigkeit definitiv beeinträchtigt. Das funktioniert perfekt. :-)
Sundararajan

2
Diese Option wurde in Bootstrap 4 entfernt: getbootstrap.com/docs/4.2/migration/#button-group
marcovtwout

41

Es ist kein zusätzliches CSS .btn-group-justifiederforderlich. 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>

3
Dadurch werden die Schaltflächen gleichmäßig aufgeteilt. Wenn Sie möchten, dass eine Schaltfläche größer als die andere ist, müssen Sie die Breite jeder Schaltfläche festlegen. Dies führt zu einer Aufteilung von <div class="btn-group" style="width: 80%"> <div class="btn-group" style="width: 20%">80 bis 20.
Silver Paladin

10

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/


4
Oh und zweitens: Für Bootstrap 3 verwenden.btn-group-justified
HenningCash

Dies führt nicht zu einer gleichen Länge für einzelne Schaltflächen. Gibt es noch etwas hinzuzufügen?
Malay Desai

@PiotrekZatorski, du bist falsch. Das von mir angebotene Beispiel verwendet Bootstrap 2, aber diese aktualisierte Version verwendet Bootstrap 3.3.6.jsfiddle.net/DEwX8/138
OregonJeff

@MalayDesai, meine zweite Geige produziert absolut gleich breite Knöpfe (innerhalb des Rahmens). Wenn Sie eine enorme Menge an Text in eine und sehr wenig in die anderen einfügen, wird dies offensichtlich nicht der Fall sein, aber bei Schaltflächen mit ähnlicher Länge haben alle die gleiche Breite. In der zweiten Geige sind sie alle 96 Pixel breit.
OregonJeff

10

Für Bootstrap 4 fügen Sie einfach diese Klasse hinzu:

w-100


1
Fügen Sie auch h-100 hinzu, wenn eine Schaltfläche in einer Zeile umschließenden Text enthält, eine andere jedoch nicht.
Jim Neff

3

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>

Diese Antwort ist großartig. Stellen Sie die Größe der Schaltflächen so ein, dass sie sich an die Auflösung des Bildschirms anpassen.

1

Winkelig - gleicher Breite

Angenommen, Sie haben eine Reihe von "Dingen" in Ihrem Bereich ...

  • Stellen Sie sicher, dass das übergeordnete div eine Breite von 100% hat.
  • Verwenden Sie ng-repeat , um die Schaltflächen innerhalb der Schaltflächengruppe zu erstellen.
  • Verwenden Sie ng-style , um die Breite für jede Schaltfläche zu berechnen.

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

0

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


0

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>

5
Codefragmente sollten immer eine Erklärung enthalten, warum dieser Code funktioniert. Vielen Dank!
AJT82

Beantwortet hier für stackoverflow.com/questions/37190248/… Bootstrap 4
Fakeer

0

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-groupweisen Sie den Container an, eine Breite von 100% zu haben, indem Sie ihm eine w-100Klasse hinzufügen . Die Schaltflächen im Inneren füllen automatisch den gesamten Bereich aus.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.