html - 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;
                }
            }

SIDE NOTE:

I used Bootstrap V.4 (Beta). The latest.