Bootstrap Flüssigkeit Behälter

Question

Ich bin nach einem Punkt in die richtige Richtung mit einer Abfrage auf Fluid-Container für das Bootstrap-Framework. Ich habe ein Bild von dem, was ich erstellen möchte, angehängt. Ich brauche zwei flüssige Reihen von 2 Spalten, aber ich brauche den Inhalt, um die Standardcontainerregeln zu halten. Ich möchte es so einfach wie möglich halten, ohne komplizierte CSS Hintergründe oder Farbverläufe.

Ich hoffe, dies ist eine einfache Abfrage. Ich bin noch nie auf die Notwendigkeit gekommen, dies mit Bootstrap zu tun.

Answer 1

Dies ist nicht möglich, da alle Messungen in Prozentsätzen hergestellt sind, so dass sie in Bezug auf den übergeordneten Container, die eingefügt werden.

Mein Vorschlag wäre, die Spalten zu platzieren, wo Sie wirklich bleiben möchten, und dann würde dieser reale Container in absoluter Position sein, auf dem anderen braun und blau schwebend.

Answer 2

ich die üblichen Bootstrap Behälter verwenden würde und col-* und dann absolute Position Pseudo-Elemente für die Hintergründe Farbblock verwenden ..

HTML

<div class="container border"> 
    <div class="row"> 
     <div class="col-sm-12"> 

     </div> 
    </div> 
    <div class="row margin-0"> 
     <div class="col-md-6 a"></div> 
     <div class="col-md-6 b"></div> 
     <div class="col-md-6 c"></div> 
     <div class="col-md-6 d"></div> 
    </div> 
</div> 

CSS

.a:after { 
    margin:0 15px 15px; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#9999cc; 
    top:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.b:after { 
    margin:0 0 15px 0; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#aa99cc; 
    top:0; 
    left:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.c:after { 
    margin:0 15px 0; 
    position:absolute; 
    content:""; 
    display:block; 
    background:#cc2299; 
    top:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 
.d:after { 
    margin:0;  
    position:absolute; 
    content:""; 
    display:block; 
    background:#aaeecc; 
    top:0; 
    left:0; 
    bottom:0; 
    z-index:-1; 
    width:200%; 
} 

http://www.codeply.com/go/OAdlxM3jKb