Rozszerzanie bootstrap pojemnik tło do krawędzi strony

Question

Jestem projektowania stronę zbudowaną na Bootstrap 3, i chciałbym, aby spróbować odtworzyć następujący wzór:

mam akapity Włożyłem do container, aby pozostały wyśrodkowane na stronie podczas zmiany rozmiaru. Chciałbym jednak, aby pewne rzędy miały kolorowe tło, które rozciąga się na boki tak daleko, jak to się dzieje, jak pokazano. Nie jestem pewien, czy to możliwe?

Jedna z metod, którą próbowałem, to przejście do klasy container-fluid dla tych wierszy, która przechodzi do krawędzi ekranu. Tego rodzaju prace, ale nie jestem pewien, czy możliwe jest umieszczenie tekstu wewnątrz innych akapitów przy zmianie rozmiaru strony? Rzeczywiście, tekst powinien zawsze mieć spójne marginesy po lewej i prawej stronie dla wszystkich bloków tekstu.

Nie sądzę, że potrzebowałabym zawartości w obszarach znajdujących się na marginesie, więc jeśli rozwiązanie dotyczyło tylko użycia standardowego kontenera do przechowywania zawartości i innej metody rozszerzenia tła na bok, to może działać .

Here is a JSFiddle to start off with, w tym jedno z pomarańczowych pudełek w numerze container-fluid, aby pokazać to podejście.

Answer 1

Nie jestem pewien, czy to jest "najlepsze" rozwiązanie, ale mimo to jest to rozwiązanie.

• utworzenia elementu pseudo dla każdego pola kolorowy (:before)
• Oczywiście pozycja, która (w odniesieniu do kolorowego pola - bootstrap już ustala położenie: Względny col-*-*).
• Set top i wartości dołu do 0 więc jest zawsze prawidłowa wysokość
• Ustaw kolor tła, aby dopasować okno
• Się szeroki szerokość, aby upewnić się, że zawsze pokrywa rynny (boki .container) na szerokich ekranach
• na lewym oknie dwustronnego ustawić left: -[width of psuedo element], na prawo stronne box set right: -[width of pseudo element
• Wreszcie, trzeba pojemnik stronę ustawiony overflow: hidden.

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