Bootstrap 4 Flex Grid 行溢出

Question

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

我的目标是在输入字段旁边显示一些帮助文本，详细描述输入字段。按下输入字段旁边的 help/info 图标后，应该会显示帮助。

正如您从屏幕截图中看到的那样，左侧的行有一个空隙。我想去掉左边的空隙

此图显示了实际情况。

右边的行应该溢出，因为输入字段的宽度都是最大 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>

Bootstrap 4 Flex Grid 行溢出

Bootstrap 4 Flex Grid row overlfow

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4