Html 表单控件与包装标签的垂直对齐在一行中使用Bootstrap 4

我在一行中有输入元素，在输入字段的上方有标签。当屏幕宽度缩小时，由几个单词组成的较长标签会扭曲到下一行，并向下移动输入元素，使整行更高：

文本的换行可以，但我希望没有换行标签的其他输入与下移的输入对齐

我怎样才能做到这一点？我想找到另一个解决方案，而不是使用省略号

这是我的代码：

<div class="row">
    <div class="col-md-4 form-group">
        <div ><label>Short Label</label></div>
        <div ><input class="form-control" ></div>

    </div>

    <div class="col-md-4 form-group">
        <div ><label>This label is too long</label></div>
        <div ><input class="form-control" ></div>

    </div>

    <div class="col-md-4 form-group">
        <div ><label>Another label</label></div>
        <div ><input class="form-control" ></div>
    </div>
</div>

短标签
这个标签太长了
另一个标签

您可以将class

col-md-4

替换为

col

<div class="row">
    <div class="col form-group">
        <div ><label>Short Label</label></div>
        <div ><input class="form-control" ></div>
    </div>
    <div class="col form-group">
        <div ><label>This label is too long</label></div>
        <div ><input class="form-control" ></div>
    </div>
    <div class="col form-group">
        <div ><label>Another label</label></div>
        <div ><input class="form-control" ></div>
    </div>
</div>

短标签
这个标签太长了
另一个标签

您可以使用新的

对齐项目结束（

类）

短标签
这个标签太长了
另一个标签

我认为最好的方法是

<div class="row align-items-baseline">

IMEngine在左侧有一个文本字段，在右侧有一个文本区域， 使用“对齐项目结束”时，文本字段的下边框将与文本区域的下边框处于同一级别。

---

使用“对齐项目基线”时，两个元素的上边框处于同一级别，我发现这种方式更好。

这并不能解决为较小屏幕宽度包装文本的问题。这正是我想要的！

<div class="row align-items-baseline">