将 Bootstrap 4 按钮组与 flexbox div 的底部对齐

Question

我有一些这样的 HTML：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="border d-flex align-items-baseline m-2 p-2" style="width: 400px">
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">Prev</button>
    <button class="btn btn-secondary">Next</button>
  </div>
  <div class="form-group flex-grow-1">
    <label for="volume">Volume:</label>
    <input type="range" class="form-control-range" id="volume" min="1" max="100" step="1" value="7">
  </div>
</div>

如您所见，Prev 和 Next 按钮与 div 的顶部对齐，如下所示：

我的目标是让它们与底部对齐，如下所示：

我怎样才能做到这一点？我以为align-items-baseline 类会这样做，但我一定是误会了。

Answer 1

align-items-baseline 类执行 align-items: baseline，而不是 但你需要align-items: flex-end

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div style="align-items: flex-end" class="border d-flex m-2 p-2" style="width: 400px">
  <div class="btn-group mr-2">
    <button class="btn btn-secondary">Prev</button>
    <button class="btn btn-secondary">Next</button>
  </div>
  <div class="form-group flex-grow-1">
    <label for="volume">Volume:</label>
    <input type="range" class="form-control-range" id="volume" min="1" max="100" step="1" value="7">
  </div>
</div>