Bootstrap - 在顶部垂直对齐表单组标签，在底部输入

Question

我有一个使用 Bootstrap 4.4 的表单。 The form groups contain a label and an input and sometimes also a select and when the select is present it breaks the alignment of the labels and inputs on the same row.

如何让标签始终在顶部，输入在底部？如果可能的话，我想在没有自定义 Css 和其他 html 元素的情况下执行此操作。

<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">
        <label for="value">Value:</label>
        <select>
            <option>something</option>
        </select>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label for="name">Name:</label>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
</div>

在其中一个容器上使用 justify，我将所有输入对齐到底部，但我想将标签保留在顶部。

编辑：我需要保持这样的布局，两个（或更多）表单组在一行：

Answer 1

如果您添加标签 -> class="w-100" 它将占用宽度：100%，因此它不会将任何元素与自身占用同一行。要将输入始终保留在表单组的末尾，您可以在它们之上添加一些内容。此外，如果您为选择和其他表单元素提供相同的设计，它会看起来更好。

<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">
        <label class="w-100" for="value">Value:</label>
        <select>
            <option>something</option>
        </select>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 form-group">
        <label class="w-100" for="name">Name:</label>
        <div class="input-group">
            <input type="text" class="form-control">
        </div>
    </div>
</div>