Bootstrap 4 Flex Grid Reihe überfließend

Question

Ich benutze ein Bootstrap 4 mit Flex Grid.

Mein Ziel ist es, einen Hilfstext neben dem Eingabefeld anzuzeigen, das das Eingabefeld detailliert beschreibt. Die Hilfe sollte beim Drücken des Hilfe-/Info-Symbols neben dem Eingabefeld angezeigt werden.

Wie Sie aus dem Screenshot der Zeilen auf der linken Seite einen Spalt sehen. Ich möchte die Lücke auf der linken Seite loswerden.

Dieses Diagramm zeigt, wie es eigentlich sein sollte.

Die Zeile auf der rechten Seite sollte überlaufen, da die Eingabefelder alle maximal 50% breit sind.

Ich bin mir nicht sicher, ob das überhaupt der richtige Ansatz ist, aber die ursprüngliche Idee war, dass, wenn es wie im Diagramm gezeigt funktionieren würde, ich nur den Hilfetext anzeigen müsste und es wäre bereits in Einklang mit der Eingabe Felder.

<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

setzen eine max-height auf der Spalte, die den Hilfetext enthält:

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