Wie erhalten Sie Schaltflächengruppen, die sich in Bootstrap über die gesamte Breite eines übergeordneten Elements erstrecken?

Wie kann ich im Bootstrap eine Schaltflächengruppe wie die folgende erhalten, die die gesamte Breite eines übergeordneten Elements umfasst? (Wie mit der ".btn-block" Klasse, aber auf eine Gruppe angewandt http://getbootstrap.com/css/#buttons-sizes)Wie erhalten Sie Schaltflächengruppen, die sich in Bootstrap über die gesamte Breite eines übergeordneten Elements erstrecken?

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
</div>

Quelle

2016-05-12 Max

Möglicherweise diese [Justified Tastengruppen] (https: // getBootstrap. com/components/# btn-groups-gerechtfertigt) – vanburen

Flexbox kann das tun.

.btn-group.special { 
 
    display: flex; 
 
} 
 

 
.special .btn { 
 
    flex: 1 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group special" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default">Left</button> 
 
    <button type="button" class="btn btn-default">Middle</button> 
 
    <button type="button" class="btn btn-default">Right</button> 
 
</div>

Quelle

2016-05-12 14:54:20

beste Methode zu verwenden –

https://Stackoverflow.com/a/45969088/6661239 Dies funktioniert, ohne Änderung CSS – Stranger26

würde ich upvote t sein zweimal wenn ich könnte; Das funktioniert wie ein Zauber – lgants

können Sie auch .btn-group-justified verwenden.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="btn-group btn-group-justified"> 
 
    <a href="button" class="btn btn-default">Left</a> 
 
    <a href="button" class="btn btn-default">Middle</a> 
 
    <a href="button" class="btn btn-default">Right</a> 
 
    </div> 
 
</div>

Quelle

2016-05-12 15:10:18 mhatch

Richtige Lösung für Bootstrap 4 (von Migrationsdokumentation):

.btn gruppen gerechtfertigt entfernt. Als Ersatz können Sie <div class="btn-group d-flex" role="group"></div> als Wrapper um Elemente mit .w-100 verwenden.

Quelle: https://getbootstrap.com/docs/4.0/migration/#button-group

Quelle

2018-02-08 20:15:21

In Bootstrap 4, die Verwendung von .d-flex auf .btn-group und .w-100 auf einzelnen Tasten machen:

.btn-group.d-flex(role='group') 
    button.w-100.btn.btn-lg.btn-success(type='button') 
    button.w-100.btn.btn-lg.btn-danger(type='button') 
    .btn-group(role='group') 
    button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown') 
     | &#8226;&#8226;&#8226; 
    .dropdown-menu 
     a.dropdown-item(href='#') An option 
     a.dropdown-item(href='#') Another option

Quelle

2018-03-02 23:07:14

Wie erhalten Sie Schaltflächengruppen, die sich in Bootstrap über die gesamte Breite eines übergeordneten Elements erstrecken?

Antwort

Verwandte Themen