Verschachteln Bootstrap Container-Flüssigkeit

Question

Ich baue eine HTML-Seite mit verschiedenen Fieldset im Hauptcontainer. Jedes Fieldset enthält verschiedene Eingabefelder. Ich bin auf diese Weise tun:

<form> 
    <div class="container-fluid"> 
    <fieldset> 
     <div class="container-fluid"> 
     <div class="row"> 
     ... 
     </div> 
     <div class="row"> 
     ... 
     </div> 
     </div> 
    </fieldset> 

    <fieldset> 
     <div class="container-fluid"> 
     <div class="row"> 
     ... 
     </div> 
     <div class="row"> 
     ... 
     </div> 
     </div> 
    </fieldset> 
    </div> 
</form> 

Ich denke nicht richtig ist zu nisten Container-Flüssigkeit, aber ich versuchte dies die richtige externe und interne div Polsterung zu bekommen. Ich habe auch versucht, Container-Fluid-Klasse von externen div zu entfernen und Padings setzen. Das Ergebnis ist auch korrekt, aber ich bin mir nicht sicher, ob die Seite noch reagiert. Gibt es eine Möglichkeit, die Container-Fluid-Klasse nicht zu verschachteln? Oder meine Lösung ist akzeptabel? Danke ...

Answer 1

1) Sie sollten Bootstrap-Container in anderen Containern immer verschachteln. Während es technisch möglich ist, sie zu verschachteln, kann ich mir keinen einzigen Fall vorstellen, wo es eine gute Idee wäre, dies zu tun. Vermeiden Sie daher immer die Containerverschachtelung.

2) Damit das Bootstrap-Grid für Sie ordnungsgemäß funktioniert, müssen Sie immer den gesamten normalen Inhalt in eine oder mehrere Spalten einfügen. Die Spalte/Spalten gehen dann in eine Zeile. Und eine Reihe geht in einen Container.

Also, Container> Zeile> Spalte ist die "heilige Dreieinigkeit", die Sie immer beibehalten möchten. Wenn Sie eine dieser 3 Komponenten vermissen, werden Sie Probleme bekommen, weil diese 3 Teile so konzipiert sind, dass sie zusammen funktionieren.

In Ihrem Code verwenden Sie nicht die Spalten, deshalb fehlen Ihnen die Paddings. Fügen Sie die Spalte/Spalten innerhalb der Zeilen hinzu und Bootstrap wird "automatisch" Ihnen die benötigten Polsterungen geben und alles wird 100% reaktionsfähig sein.

3) Denken Sie immer zweimal (oder 3-mal) nach, bevor Sie Behälterflüssigkeit verwenden. Da container-fluid den Inhalt über die gesamte Bildschirmbreite erstreckt, werden Benutzer mit großen 4K-Monitoren Sie dafür hassen.

Der folgende Code ist ein Beispiel, das ziemlich gut funktionieren würde:

<form> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <fieldset> 
 
       <div class="col"> 
 
        content goes here... 
 
       </div>     
 
      </fieldset> 
 
     </div> 
 
     <div class="row"> 
 
      <fieldset> 
 
       <div class="col"> 
 
        content goes here... 
 
       </div>     
 
      </fieldset> 
 
     </div> 
 
    </div> 
 
</form>