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>