ブートストラップ4フレックスグリッド行overfow

Question

私は、Flex Gridでブートストラップ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>