Bootstrap - 当标签跨越2条线时，正确对齐控制标签

Question

我正在使用bootstrap控制组和控件标签。

对于每个标签/输入，我将它包装起来：

<div class="span5">
  <div class="control-group">
    <label class="control-label">
    <div class="controls">
      <input>
      <div !-- some hidden help block -->
      </div>
    </div>
  </div>
</div>

我试图在每行中安装其中两个，所以我将它们全部设置为单行内的span5流体

但是，我的一些标签很长，并且不适合span5中的单行。因此标签最终被分成多行，但只有第一行垂直与输入一致，如下所示：

我希望它不是第一行垂直对齐，而是整个标签垂直对齐（所以如果标签是2行，则2行之间的间隙与输入垂直对齐）。

这可以使用bootstrap吗？

Answer 1

我不知道我是否明白你想做什么。但下面是我为实现我从问题中理解的内容所做的代码。

<div class="container p-4">
            <div class="form-group row">
                <label for="input2" class="col-md-4 col-form-label text-right">Monthly Vacation Carried Over (Days)</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="input2" style="width: 50%;">
                </div>
            </div>

            <div class="form-group row">
                <label for="input3" class="col-md-4 col-form-label text-right">Monthly Vacation Carried Over (Days)</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="input3" style="width: 50%;">
                </div>
            </div>
        </div>

小屏幕设备的样式。

@media(max-width: 576px) {
                .form-control {
                    width: 100% !important;
                }
                label {
                    text-align: left;
                }
            }

  

侧面注意：

     

我使用了Bootstrap V.4（Beta）。最新的。