如何在Bootsrap行内并排对齐两个输入？

Question

由于标签文本长度的不同，两个输入未对齐。以下是我的代码的一部分：

<div class="row">
    <div class="col-auto col-md-6 form-group">
         <label for="category">Which of the following best describes you?</label>
         <select class="form-control" id="category" name="category">
             <option>Furniture Designer</option>
             <option>Architect</option>
         </select>
    </div>

    <div class="col-auto col-md-6 form-group">
        <label for="training">Education level/type </label>
        <input type="text" name="training" class="form-control" id="training" placeholder="Training">
    </div>

</div>

我如何轻松地解决未对准问题并保持表格具有重复性？

Answer 1

您可以制作form-group的d-flex flex-column，然后在表格输入上使用mt-auto强制底部对齐...

Answer 2

尝试这种方式

Answer 3

引导程序4中的默认行为是标签将显示在输入上方。 （当然可以使用上面的代码）。

Answer 4

如果您想用一小段代码来处理它，我希望这一行对您有用：