Bootstrap 4如何均匀分布按钮（并垂直对齐）？

Question

我正在使用下面的代码来生成下面的按钮，但是 1) 在使用 btn-block 建议后，按钮无法传播。正如justify-content-center 建议的那样，按钮也没有居中对齐。我在下面粘贴了我的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
    <div class="row">
        <div class="col pl-1">
            <div class="form-row no-gutters h-100">
                <div class="form-group col card form-header text-center">
                    <div class="card-header form-label">
                        <label for="action">Action <i class="fas fa-plus"></i></label>
                    </div>
                    <div class="card-body h-100 d-flex flex-column">
                        <div class="p-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
                                class="fas fa-sync"></i></button>
                        </div>
                        <div class="p-2">
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="p-2">
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

还有下面的截图：

我想 1) 垂直对齐按钮 2) 减小按钮之间的间距 3) 确保整个 card 与左侧的框对齐（我使用 h-100 以确保它填充整个高度）。类似于下图：

提前致谢

Answer 1

您只需将一类引导程序 .col-1 编辑为 .col-4 即可获得类似的图像

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="col-4 pl-1">
  <div class="form-row no-gutters h-100">
    <div class="form-group col card form-header text-center">
      <div class="card-header form-label">
        <label for="action">Action <i class="fas fa-plus"></i></label>
      </div>
      <div class="card-body h-100 d-flex flex-column">
        <div class="p-2">
          <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="refresh"><i
                                class="fas fa-sync"></i></button>
        </div>
        <div class="p-2">
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="selectAll"><i class="fas fa-check"></i></button>
            </div>
            <div class="col-6">
              <button type="button" class="btn btn-sm btn-outline-secondary btn-block" id="deselectAll" disabled><i class="fas fa-times"></i></button>
            </div>
          </div>
        </div>
        <div class="p-2">
          <div class="row">
            <div class="col-6">
              <button type="button" class="btn btn-sm btn-success btn-block" id="call" disabled>C</button>
            </div>
            <div class="col-6">
              <button type="button" class="btn btn-sm btn-danger btn-block" id="put" disabled>P</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>