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

要将Bootstrap 4按钮组与一个使用flexbox的div的底部对齐，你可以使用Bootstrap的Flexbox实用程序类

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <div class="d-flex flex-column" style="height: 300px; border: 1px solid black;">
            <div class="flex-fill d-flex align-items-center justify-content-center">
                <p>这里是内容区域</p>
            </div>
            <div class="btn-group d-flex" role="group" aria-label="Button group">
                <button type="button" class="btn btn-primary">按钮1</button>
                <button type="button" class="btn btn-secondary">按钮2</button>
                <button type="button" class="btn btn-success">按钮3</button>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

在这个例子中，我们创建了一个带有边框的flexbox div（.d-flex.flex-column），并设置了高度。我们将内容区域（<p>这里是内容区域</p>）放在一个充满空间的div中（.flex-fill.d-flex.align-items-center.justify-content-center），使其垂直居中。

接下来，我们将按钮组（<div class="btn-group d-flex" role="group" aria-label="Button group">）放在内容区域下方，并使用.d-flex将其设置为flex容器。这会使按钮组在垂直方向上自动填充剩余空间，并在底部对齐。

最后，我们添加了一些Bootstrap 4的类来美化按钮和容器。