将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>