Erweitern eines Bootstrap-Container Hintergrund an den Rand der Seite

Question

ich eine Seite auf Bootstrap 3, gebaut Gestaltung und ich möchte folgende Entwurf versuchen und neu erstellen:

Ich habe Absätze, die Ich habe in eine container, so dass sie auf der Seite zentriert bleiben, wie es in der Größe geändert wird. Ich möchte jedoch, dass bestimmte Zeilen einen farbigen Hintergrund haben, der sich wie gezeigt von den Seiten bis zum Anschlag erstreckt. Ich bin mir nicht sicher, ob das möglich ist?

Eine Methode, die ich ausprobiert habe, ist für diese Zeilen eine container-fluid Klasse zu wechseln, die an den Rand des Bildschirms geht. Diese Art von Arbeiten, aber ich bin mir nicht sicher, ob es dann möglich ist, dass der Text innerhalb der anderen Absätze inline bleibt, wenn die Größe der Seite geändert wird? Eigentlich sollte der Text für alle Textblöcke immer die konsistenten Ränder auf der linken und rechten Seite haben.

Ich glaube nicht, dass ich Inhalte in den Bereichen im Rand benötigen würde, also wenn eine Lösung einfach einen Standardcontainer verwendet, um den Inhalt zu halten, und eine andere Methode, den Hintergrund auf die Seite zu erweitern, kann das funktionieren .

Here is a JSFiddle to start off with, einschließlich einer der orangefarbenen Kästchen in einer container-fluid, um diesen Ansatz zu demonstrieren.

Answer 1

Ich bin mir nicht sicher, ob dies die "beste" Lösung ist, aber es ist dennoch eine Lösung.

• Erstellen für jedes Farbfeld ein Pseudoelement (:before)
• der absolut Position (relativ zu dem farbigen Feld - Bootstrap bereits Position setzt: relative auf col-*-*).
• Set oben und unten Werte auf 0, so ist es immer die richtige Höhe
• Set Hintergrundfarbe Box
• es zu passen Geben Sie eine große Breite immer deckt die Rinne zu gewährleisten (Seiten .Behälter) auf großen Bildschirmen
• für die linksseitige Feld gesetzt left: -[width of psuedo element], für rechtsseitige Box right: -[width of pseudo element Schließlich
• setzen Sie eine Seite Container overflow: hidden eingestellt benötigen.

HTML

<div id="page"> 
    <div class="container"> 
     ... 
    </div> 
</div> 

CSS

#page { 
    overflow: hidden; 
}  

.box-left:before, 
.box-right:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 999em; 
    top: 0; 
    bottom: 0; 
} 

.box-left:before { 
    left: -999em; 
    background: orange; 
} 

.box-right:before { 
    right: -999em; 
    background: lightblue; 
} 

DEMO