如何在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>

可能这[对齐按钮组（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>

最好的使用方法 –

https://*.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

答

正确的解决方案（从移植文档）：

移除.btn组对齐。作为替代品，您可以使用<div class="btn-group d-flex" role="group"></div>作为与.w-100元素的包装。

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

答

在引导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

如何在Bootstrap中获得跨父宽度的按钮组？

相关推荐