html - Bootstrap : Justified shrink the button

Question

我有一个 div，我想在其中使用带有 3 个按钮的全 Angular 按钮组。第二个和第三个按钮“文本”将只是字体超棒的图标，所以我希望它们比第一个小。 (比如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>元素，您必须将每个按钮包装在一个按钮组中。请在此处查看引导文档: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>