Bootstrap 4 Flex Grid行覆盖

Question

我正在使用带有Flex Grid的Bootstrap 4。

我的目标是在输入字段旁边显示一些帮助文本，详细描述输入字段。按下输入字段旁边的帮助/信息图标时，应显示帮助。

从截图中可以看出，左侧的行有间隙。 我想摆脱左边的差距。

此图显示了它实际应该如何。

右边的行应该溢出，因为输入字段的宽度都是最大50％。

我不确定这是否是正确的方法，但最初的想法是，如果它会像图中所示那样工作，我只需要显示帮助文本，它就已经与输入字段一致了。

  <form>
    <section class="form-block">
      <label>Application Configuration</label>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_1">DNS Entry
            <clr-icon shape="info-circle"></clr-icon>
          </label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <input class="form-control" type="text" id="aForm_1" placeholder="Enter value here" size="55">
        </div>
        <div class="col-lg-1">
          <clr-icon shape="info-circle"></clr-icon>
        </div>
        <div class="col-lg-6">
          <h3>Help Text</h3>
          <p>
            <span>Some helping text or description.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
            <span>Festus, nobilis dominas absolute contactus de emeritis, dexter ignigena.</span>
          </p>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_2">Another form field</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <input class="form-control" type="password" id="aForm_2" placeholder="Enter another value here" size="35">
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_3">A select box</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <div class=" form-control select">
            <select id="aForm_3">
              <option>Option 1</option>
              <option>Option 2</option>
              <option>Option 3</option>
              <option>Option 4</option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-lg-2 col-md-4 col-sm-12 col-xs-12">
          <label class="form-control" for="aForm_4">Textarea</label>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
          <textarea class="form-control" id="aForm_4" rows="5"></textarea>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
        <button type="submit" class="btn btn-primary">Button</button>
      </div>
    </section>
  </form>

Answer 1

在包含帮助文字的列上设置max-height：

      <div class="col-lg-6" style="max-height:45px;">
        <h3>Help Text</h3>