Bootstrap：合理缩小按钮答案

【问题标题】：Bootstrap: Justified shrink the buttonBootstrap：合理缩小按钮
【发布时间】：2018-02-19 07:59:38
【问题描述】：

我有一个 div，我想在其中使用带有 3 个按钮的全角按钮组。第二个和第三个按钮“文本”将只是字体真棒图标，所以我希望它们比第一个小。（例如 60%-20%-20%）

我试过这个sn-p（我还没有使用“其他两个更小”的样式，所以它必须是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%。为什么？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

要使用带有<button> 元素的对齐按钮组，您必须将每个按钮包装在一个按钮组中。在此处查看引导文档：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>

【讨论】：

【解决方案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>

【讨论】：