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>