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

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

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

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>

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>

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/

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

w-100

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>

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>

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>

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.