Włącz bootstrap kolumn tła krwawić na krawędzi rzutni

Question

Staram się wypracować jak osiągnąć następujące w Bootstrap 3:

1. Mam stronę HTML, która opiera się głównie wokół stałej siatki pojemnika Bootstrap za.
2. W połowie strony chcę wiersz z kolumnami o różnych rozmiarach.
3. Chcę, aby zawartość (tekst/obrazy) wewnątrz tych kolumn była zgodna z zawartością wewnątrz kolumn w ustalonej siatce kontenera.
4. Chcę, aby kolory tła lewej i prawej kolumny z lewej strony były krwawiące w prawo do krawędzi strony.

To może pomóc, gdybym ilustrują, co usiłuję osiągnąć:

Każda pomoc będzie bardzo mile widziane!

Aktualizacja: zgodnie z wnioskiem oto kilka przykładów kodu, co obecnie mam: http://www.bootply.com/ZzOefJGRRq Jak widać tekst i kolumny w zbiorniku płynu nie są w kolejce poprawnie.

Answer 1

Można użyć :before elementy i niektórych klas

https://jsfiddle.net/ex3ntia/wa8myL9v/2/

.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1} 

UPDATE

dodany zapytania mediów dla małych urządzeń https://jsfiddle.net/ex3ntia/wa8myL9v/3/

UPDATE 2

Dodałem następujący wiersz, aby naprawić duże poziome przewijanie w przeglądarkach Chrome.

body, html {overflow-x: hidden;margin: 0;padding: 0;} 

Answer 2

Aby to osiągnąć, można zaimplementować container-fluid.

Zasadniczo Twoja strona będzie miała następującą strukturę:

<div class="container"> 
    <p>Content here</p> 
</div> 
<div class="container-fluid"> 
    <p>"Bleeded" content here</p> 
</div> 
<div class="container"> 
    <p>And it continues with the fixed width!</p> 
</div> 

Jeśli trzeba dostosować przestrzenie między tymi pojemnikami, można dodać własne klasy lub identyfikatora: s do siebie i rodzaj go stamtąd . Ponieważ kontenery w Bootstrap nie mają dużego domyślnego stylu, jest to bardzo skuteczny sposób tworzenia tego, co chcesz tutaj zrobić.

EDIT: Po zbadaniu sekcję komentarzy i patrząc na kod, który podałeś, zakładam, że chcesz mieć zbiornik płynu, ale zachować zawartość w nim w kolejce ze stałym pojemniku, prawda?

W tym celu można po prostu umieścić kolejny <div class="container">...</div> w swoim container-fluid. Sprawdź updated fiddle.

Answer 3

Tam, gdzie masz specjalny wiersz, potrzebujesz elementu div z klasą klasy kontenera, która zawiera element div z klasą kontenera (jest to klasa o stałej szerokości).

Następnie należy obliczyć kolory tła po obu stronach. Albo dodaj dodatkowe divy w pojemniku - płyn z każdej strony pojemnika i ustaw kolor tła, albo użyj tabeli z trzema kolumnami.