web-dev-qa-db-de.com

Bootstrap 3 Btn-Gruppenbreite

Ich habe ein anderes Problem mit Bootstrap ... Ich möchte meinem Formular ein Radio und Kontrollkästchen hinzufügen, ich möchte, dass sie auch die Breite des Formularelements von 100% annehmen.

Ich habe eine Schaltflächengruppe hinzugefügt:

<div class="form-group">
    <label class="col-sm-3 control-label">Subscribe</label>
    <div class="col-sm-9">
        <div class="btn-group input-group" data-toggle="buttons">
            <label class="btn btn-success">
                <input type="radio" name="options" id="option1" />Yes</label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2" />Maybe</label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option3" />No</label>
        </div>
    </div>
</div>

Das gibt mir schöne Funkknöpfe:

Aber wie Sie sehen, haben sie eine feste Breite. Kann dies mit Bootstrap-Klassen behoben werden? Hier noch einmal mein Beispielcode: http://jsfiddle.net/Misiu/yy5HZ/5/

csscss3twitter-bootstraptwitter-bootstrap-3
22
Misiu

Verwenden Sie die integrierte .btn-group-justified-Klasse: Offizielle Dokumente

Erstellen Sie eine Gruppe von Schaltflächen, die sich auf die gleiche Größe ausdehnen, um die gesamte Breite des Elternteils. Funktioniert auch mit Button-Dropdowns innerhalb von Tastengruppe.

Anker:

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group"> 
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a> 
</div>

Tasten:

Um ausgerüstete Schaltflächengruppen mit <button>-Elementen zu verwenden, müssen Sie mit .__ umbrechen. Jede Taste in einer Tastengruppe. Die meisten Browser wenden unser .__ nicht richtig an. CSS zur Begründung von <button>-Elementen, aber da wir .__ unterstützen. Button Dropdowns, wir können das umgehen.

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <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>

JSFiddle

69
Schmalzy

Sie können einfach die Bootstrap-Col-n-Klassen verwenden. Wenn Sie also 2 Buttons haben, verwenden Sie col-xs-6. Das Problem ist, wenn Sie beispielsweise 5 Tasten haben. Im Bootstrap-Grid-System gibt es dafür keine Klasse. Ich würde also eines der folgenden verwenden:

Um zwischen Gruppen mit einer unterschiedlichen Anzahl von Schaltflächen zu unterscheiden, verwenden Sie zusätzliche benutzerdefinierte Klassen:

JSFiddle

CSS

.btn-group {
    width: 100%;
}
.btn-group-2 label.btn  {
    width: 50%;
}
.btn-group-3 label.btn  {
    width: 33.3%;
}

HTML 

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="option1" />Yes</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" />Maybe</label>
    <label class="btn btn-danger">
        <input type="radio" name="options" id="option3" />No</label>
</div>

Wenn Sie diese CSS-Klassen vermeiden möchten, können Sie nur jQuery verwenden:

JSFiddle

$('.btn-group').each(function(index, item) {
    $(item).find('.btn').css(
        'width', 100 / $(item).find('.btn').length + '%'
    )
});
4
Markus Kottländer

Eine andere Lösung:

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}
1
Feeco

Sie können einfach eine eigene Klasse hinzufügen und ihnen eine Breite von 33% (für die 3 Tasten) oder 50% (für die 2 Tasten) zuweisen.

0
Valerie

Für Bootstrap 4 sagen die Dokumente, dass Sie dies tun können:

.btn-group-justified wurde entfernt. Als Ersatz können Sie <div class="btn-group d-flex" role="group"></div> als Wrapper für Elemente mit .w-100 verwenden.

0
max kaplan

Wenn die Lösung von @ Schmalzy nicht funktioniert, verwenden Sie möglicherweise Bootstrap v3.0.0. Fügen Sie dazu in HTML-Markup in der Lösung von @ Schmalzy die folgenden Stile hinzu.

.btn-group-justified > .btn-group .btn {
    width: 100%;
}

.btn-group-justified > .btn, .btn-group-justified > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}
0
ZerosAndOnes