css - 在 Bootstrap 3 中的两个堆叠选择之间垂直对齐一组按钮

Question

我正在使用 Bootstrap 3 模态实现 Angular 色权限分配屏幕。 Please, see a demo of current state在全屏中，所以选择不会堆叠在彼此之下，而是对齐到一边。如您所见，现在按钮贴在顶部，但我想将它们放在模态中心的一个列中:

代码很简单，check plunkr详情:

<div class="modal-header">
  <h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-5 form-group">
      <label for="availablePermission">
        Available permissions
      </label>
      <select id="availablePermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="0">Change password</option>
          ...
        </optgroup>
      </select>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-right"></i>
      </button>
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-left"></i>
      </button>
    </div>
    <div class="col-md-5 form-group">
      <label for="existingPermission">
        Assigned permissions
      </label>
      <select id="existingPermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="1">View users</option>
          ...
        </optgroup>
      </select>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary">OK</button>
  <button class="btn btn-warning">Cancel</button>
</div>

我已经尝试使用 display: flex 和 flex-direction: column 将 flexbox 用于中间列，但按钮没有移动一个像素。 display: table-cell 和 vertical-align: middle 也不起作用。是否可以在不使用硬编码维度的情况下将它们漂亮地集中？

Answer 1

设法让它与 flexbox 一起工作， 虽然失去了一点适应性:尝试改变宽度 - 现在选择不会垂直堆叠 :( 添加一个 @media查询(类似于 Bootstrap 的 *-md 查询)将解决此问题。

  @media (min-width: 992px) {
    .flex-row {
      display: flex; 
    }
  }

  .flex-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

Plunkr