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-11">
            <div class="form-row no-gutters">
                <div class="form-group col card form-header text-center">
                    <div class="card-header form-label">
                        <label for="alert">Text Input</label>
                    </div>
                    <div class="card-body">
                        <input type="text" class="form-control" placeholder="Alert" id="alert" name="alert">
                    </div>
                </div>
            </div>
            <div class="form-row no-gutters">
                <div class="form-group col card form-header text-center">
                    <div class="card-header form-label">
                        <label for="alert">Text Input</label>
                    </div>
                    <div class="card-body">
                        <input type="text" class="form-control" placeholder="Alert" id="alert" name="alert">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-1 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>