Wie verschachtelte Grids in Bootstrap 4 mit Flexbox

Question

verwenden Ich benutze Bootstrap 4 CSS mit flexbox und ich habe Probleme mit verschachtelten Grids. Nesting Grids funktionieren wie erwartet in Bootstrap 4 ohne flexbox, aber wenn flexbox verwendet wird, werden die Elemente gestapelt, anstatt sich horizontal anzuordnen. Dieser Code:

<main class="container-fluid"> 
    <form novalidate> 
     <div class="row"> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group"> 
        <label>Single input</label> 
        <div class="input-group input-group-sm"> 
         <span class="input-group-addon">1</span> 
         <input type="text" class="form-control" placeholder="100%"> 
        </div> 
       </fieldset> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group row"> 
        <div class="col-md-6"> 
         <label>Double Input 1</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
        <div class="col-md-6"> 
         <label>Double Input 2</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
       </fieldset> 
      </div> 
     </div> 
    </form> 
</main> 

Erzeugt this view.

EDIT: Merkwürdigerweise, wenn ich die Feldgruppen in der zweiten Spalte zu divs ändern, das Layout wie erwartet funktioniert. Ich konnte jedoch, abgesehen von den berechneten Höhen der Elemente, keine sinnvollen CSS-Unterschiede zwischen Fieldsets und Divs finden. Was ist mit Fieldset, das das Layout bricht?

Leider kann ich keine jsfiddle erstellen, da die Version von Bootstrap 4 css, die über eine CDN verfügbar ist nicht Flexbox aktiviert ist.

Answer 1

Ihre innere nächste .row ist in einem <fieldset> Tag.

In TWBS-Feldsätzen sind die Ränder auf 0 gesetzt und Zeile Klassen setzen Sie links/rechts auf -15px. Die Kombination, die Sie verwenden bricht das Layout und die Spalte damit umschließt.

Versuchen Sie, in einem seperaten .row<div> zu verschachteln, so.

<!-- does not work --> 
<fieldset class="form-group row"> 
    ... 
</fieldset> 


<!-- better solution --> 
<div class="row"> 
    <fieldset class="form-group"> 
    .. 
    </fieldset> 
</div>