Bootstrap .container płynu z „.container-like” układ

Question

mam Bootstrap strona zbudowany z wykorzystaniem .container dla układu z dodatkowym CSS nieruchomości na .container w moim miejscu CSS:

.container { 
    width: 1170px; 
} 

Jestem teraz próbując przejść do układu .container-fluid, dzięki czemu mogę mieć pełnoekranowe obrazy tła w moich elementach div, ale jednocześnie nadal potrzebuję rzeczywistej zawartości moich elementów div, aby mieć układ podobny do tego, który jest ustawiony na. Do tej pory próbowałem zagnieździć .container w .container-fluid, ale nie wydaje się to najlepszym rozwiązaniem lub dobrą praktyką w tej kwestii.

Wszelkie wskazówki będą mile widziane.

Answer 1

Niedawno chciał to zrobić, ale niektóre rozwiązania znalazłem były bardziej skomplikowane niż jest to potrzebne. To, co zrobiłem, było dokładnie tym, co już zasugerował uʍopǝpısdn w komentarzach do twojego pytania, tj. Owinięcie .container w div.

stworzyłem kilka stylów kolorów dla każdej z sekcji Potrzebowałem barwione:

.bg-black { 
    background-color: #111; 
} 
//add more colors, even background images in a similar manner 

i używane te style jak klas każdy owijania div:

<div class="bg-black"> 
    <div class="container"> 
     //content here 
    </div> 
</div> 
<div class="bg-red"> 
    <div class="container"> 
     //other content here 
    </div> 
</div> 
//...and so on 

Takie rozwiązanie oczywiście wymaga restrukturyzacji twój HTML używał jednego .container na sekcję zamiast jednego .container na body, który okazał się działać całkiem dobrze.

Answer 2

<div class="container-fluid"> 
    <div class="wrap"> 
    <div class="container"> 
     <div class="row"> 
     here u can use span or u can provide the style property 
     </div> 
    </div> 
    </div> 
</div> 

że powinno pomóc :) u