如何在Bootstrap中獲得跨父寬度的按鈕組？

在Bootstrap中，我如何得到如下的按鈕組，跨越父元素的全部寬度？（如用「.btn塊」級，但應用於一組http://getbootstrap.com/css/#buttons-sizes）如何在Bootstrap中獲得跨父寬度的按鈕組？

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

來源

2016-05-12 Max

可能這[對齊按鈕組（https：//開頭getbootstrap。 com/components /＃btn-groups-justified） – vanburen

Flexbox的能做到這一點。

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

來源

2016-05-12 14:54:20

最好的使用方法 –

https://stackoverflow.com/a/45969088/6661239 這個工程沒有修改CSS – Stranger26

我會upvote t如果可以的話他會兩次。這就像一個魅力 – lgants

您還可以使用.btn-group-justified。

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

自舉4

來源

2016-05-12 15:10:18 mhatch

正確的解決方案（從移植文檔）：

移除.btn組對齊。作爲替代品，您可以使用<div class="btn-group d-flex" role="group"></div>作爲與.w-100元素的包裝。

來源：https://getbootstrap.com/docs/4.0/migration/#button-group

來源

2018-02-08 20:15:21

在引導4，利用.d-flex您.btn-group和.w-100上各個按鈕：

.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

來源

2018-03-02 23:07:14

如何在Bootstrap中獲得跨父寬度的按鈕組？

回答

相關問題