Verschachteln einer Container-Klasse in Bootstrap 3 in einer Container-Fluid-Klasse?

Question

Abgesehen von dem Padding-Problem, warum ist es nicht ratsam, .container in .container-fluid zu verschachteln?

Wenn Sie die Unterfüllung des untergeordneten Containers auf null setzen (wie in meinem Code unten gezeigt), ist der Effekt der gleiche wie bei einem Container. Es scheint auch, dass das Ändern der vollen und festen Breite Layout heutzutage ziemlich üblich ist. Ich weiß, was die Dokumentation sagt (LINK), aber ich bin neugierig, wenn jemand etwas anderes als das Padding-Problem weiß, das diese Implementierung nicht empfohlen wird. Ist es das zusätzliche Markup oder etwas anderes, das ich vermisse?

Der Grund, warum ich frage, ist, dass ich dies auf einer Reihe von Websites in letzter Zeit implementiert habe und keine offensichtlichen Probleme damit in den Tests, die ich getan habe, gesehen habe. Ich frage mich, ob es noch andere mögliche Probleme gibt, die mich dazu veranlassen könnten, diese Praxis einzustellen.

CSS

.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 

HTML

<div class="container-fluid" style="background-color:aliceblue;"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
        <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
    </div> 
</div> 

Example on Bootply

Answer 1

Nach sucht dieses Problem, ich glaube, ich auf diese Frage eine gute Antwort haben. Basierend auf dem, was ich gefunden habe, scheint es, dass die Bootstrap documentation und die examples on the Bootstrap website der Empfehlung widersprechen, dass die Container-Klassen nicht geschachtelt werden können. Dies ist acknowledged im Repo. Es scheint also, dass die Empfehlung in der Dokumentation über das Verschachteln von Containern und das daraus resultierende Füllproblem, das von verschachtelten Containern verursacht wird, das einzige wirkliche Problem mit diesem Problem darstellt, da ich keine anderen Probleme damit gefunden habe.

In dem Repo fand ich eine andere potential solution, die empfohlen, Ränder auf verschachtelten Containern zu ändern. Aber ich denke, dass meine Lösung, das Kind-Container-Padding auf Null zu setzen, wie in dieser anfänglichen Frage umrissen, ein bisschen praktischer und direkter ist, da kein zusätzliches Markup benötigt wird, um den gewünschten Effekt zu erzielen. Ich werde die Margenlösung aus dem Repo hier als Referenz hinzufügen. Es beinhaltet im Wesentlichen das Hinzufügen einer festen Klasse zum übergeordneten Container und dann das Anwenden negativer linker und rechter Ränder auf jeden verschachtelten Container innerhalb des übergeordneten Elements. Beachten Sie, dass diese Lösung nicht für Instanzen von Containern gilt, die in Container-Fluid verschachtelt sind. Nur für Container, die in anderen Containern verschachtelt sind.

---

CONTAINER verschachtelt CONTAINER

HTML

<div class="container fixed"> 
    <div class="container"> 
    <div class="container"> 
     <div class="container"></div> 
    </div> 
    </div> 
</div> 

CSS

.container.fixed .container { 
    margin-left: -15px; 
    margin-right: -15px; 
} 

Example on Bootply

---

BEHÄLTER IN CONTAINER-FLUID

CSS

.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 

HTML

<div class="container-fluid" style="background-color:aliceblue;"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
        <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
     <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div> 
    </div> 
</div> 

VERSCHACHTELT Example on Bootply

---

Zum Schluss, obwohl es nicht zu empfehlen, es zu nisten Behälter ohne weiteres möglich ist und im richtigen Kontext kann es tatsächlich nützlich sein, wie zum Beispiel in Fällen, in denen ein Layout und voller Breite Inhalt wird korrigiert Unterschiedlich. Es müssen jedoch sorgfältige Überlegungen und Anpassungen vorgenommen werden, um das Auffüllproblem zu berücksichtigen, das sich aus dem Verschachteln von Containern ergibt.