Question

我有一个div，我想使用带有3个按钮的全宽按钮组。第二个和第三个按钮“text”将只是字体很棒的图标，所以我希望它们小于第一个。（例如60％-20％-20％）

我尝试了这个片段（我没有使用“其他两个更小”的样式，所以它必须是33％-33％-33％但是总计）

<div class="btn-group btn-group-justified">
    <button class="btn btn-default disabled">
        {{$buttonText}}
    </button>
    <button class="btn btn-warning">
        <i class="fa fa-edit"></i>
    </button>
    <button class="btn btn-danger">
        <i class="fa fa-trash"></i>
    </button>
</div>

但整个btn-group仅占据div的25％。为什么呢？

Answer 1

要使用带有<button>元素的对齐按钮组，必须将每个按钮包装在按钮组中。请参阅此处的bootstrap文档：With <button> elements

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
   <div class="btn-group" role="group">
      <button class="btn btn-default disabled">
      asdasd
      </button>
   </div>
   <div class="btn-group" role="group">
      <button class="btn btn-warning">
      <i class="fa fa-edit"></i>
      </button>
   </div>
   <div class="btn-group" role="group">
      <button class="btn btn-danger">
      <i class="fa fa-trash"></i>
      </button>
   </div>
</div>

Answer 2

我会使用网格布局来救援。我的btn不再受内容宽度的限制。

<div class="row">
<button class="col-xs-10 btn btn-primary">
    BTN 1
</button>
<button class="col-xs-1 btn btn-warning">
    <i class="fa fa-edit"> BTN 2</i>
</button>
<button class="col-xs-1 btn btn-danger">
    <i class="fa fa-trash"> BTN 3</i>
</button>

Bootstrap：Justified缩小按钮

2 个答案: