使用引导程序btn-group-justified布局,我有一组按钮,如下所示:

css - 使用 bootstrap btn-group对齐的布局时,是否可以使用不同宽度的按钮?-LMLPHP

但我需要它看起来像这样:

css - 使用 bootstrap btn-group对齐的布局时,是否可以使用不同宽度的按钮?-LMLPHP

是否可以更改引导程序合理的布局以适应这样的情况?

我知道我可以在不使用引导程序合理布局的情况下做到这一点,但是我确实需要按钮组占用整个宽度,并且与其他按钮组的宽度相同。

最佳答案

btn-group-justified类具有固定的表布局,因此具有btn-group类的子元素的作用类似于表单元格。您只需要更改其宽度即可。



@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

body {
  margin-top: 10px;
}

.btn-group-justified > .btn-group:nth-of-type(odd) {
  width: .25%;
}

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="btn-group btn-group-justified" role="group" aria-label="">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
        </div>
      </div>
    </div>
  </div>
</div>

10-05 21:01
查看更多