Bootstrap4.4表单组如何实现标签居顶、输入控件居底对齐

你可以直接复用Bootstrap 4自带的弹性布局工具类实现需求，不需要额外写CSS也不需要新增HTML元素，只要给现有元素添加以下类即可：

• 给每个包含form-group的列元素添加d-flex flex-column类，将单个表单组转为垂直弹性布局，让内部元素沿垂直方向排布
• 给每个表单组内的最后一个输入控件/输入组添加mt-auto类，靠自动上margin填充垂直方向剩余空间，将输入控件固定到容器底部
• 给你的select元素补充form-control类，统一表单控件的默认高度规范，避免不同控件高度不一致

修改后的完整代码如下：

<div class="row col-sm-12 col-md-12 col-lg-12">
    <div class="col-sm-12 col-md-3 col-lg-3 form-group d-flex flex-column">
        <label for="value">Value:</label>
        <select class="form-control mb-2">
            <option>something</option>
        </select>
        <div class="input-group mt-auto">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 form-group d-flex flex-column">
        <label for="name">Name:</label>
        <div class="input-group mt-auto">
            <input type="text" class="form-control">
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者wi2ard