Bootstrap - 当标签跨越 2 行时正确对齐控制标签答案

【问题标题】：Bootstrap - Align control-labels properly when labels span across 2 linesBootstrap - 当标签跨越 2 行时正确对齐控制标签
【发布时间】：2018-02-02 16:35:46
【问题描述】：

我正在使用引导控制组和控制标签。

对于每个标签/输入，我将其包装如下：

<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 行之间的间隙与输入垂直对齐）。

是否可以使用引导程序来做到这一点？

【问题讨论】：

请在JSFiddle上分享代码
我对引导程序不是很熟悉，因为其中很多是由框架插入的。我试图在 jsfiddle 中复制它，但控制标签似乎显示在输入上方而不是旁边。你知道这是为什么吗？ jsfiddle.net/v9ec3/1245
你需要两个相邻的方块吗？或者你的问题是关于文本行空间的间距？ Check this
你使用的是什么版本的引导程序？

标签： html css twitter-bootstrap

【解决方案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（测试版）。最新的。

【讨论】：