如何在Bootstrap中获取跨越父级全宽的按钮组?

时间:2016-05-12 14:41:16

标签: html css twitter-bootstrap class buttongroup

在Bootstrap中,如何获得跨越父元素的整个宽度的按钮组? (与“.btn-block”类一样,但适用于组http://getbootstrap.com/css/#buttons-sizes

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

6 个答案:

答案 0 :(得分:46)

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>

答案 1 :(得分:40)

Bootstrap 4 的正确解决方案(来自其迁移文档):

  

删除.btn-group-justified。作为替代,您可以使用<div class="btn-group d-flex" role="group"></div>作为 .w-100 元素的包装。

示例:

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

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

答案 2 :(得分:5)

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

答案 3 :(得分:2)

您还可以使用引导程序btn-block,该引导程序会跨越整个父级。

通过添加。btn-block,创建跨父级整个宽度的块级按钮。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

https://getbootstrap.com/docs/4.0/components/buttons/

答案 4 :(得分:1)

<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
    <button class="btn btn-success col-sm-10" type="submit">Button 1</button>
    <button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>

答案 5 :(得分:0)

您也可以使用.btn-group-justified

&#13;
&#13;
<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>
&#13;
&#13;
&#13;