Bootstrap .container-chất lỏng với ".container giống như" bố trí

Question

Tôi có một trang web được xây dựng sử dụng Bootstrap.container cho bố trí với một tài sản CSS bổ sung cho .container vào trang web CSS của tôi:

.container { 
    width: 1170px; 
} 

Tôi bây giờ cố gắng di chuyển đến bố cục .container-fluid để tôi có thể có hình nền toàn màn hình trong div của mình, nhưng đồng thời tôi vẫn cần nội dung thực tế của các div của tôi để có bố cục giống như .container. Cho đến nay tôi đã cố gắng để làm tổ một .container trong một .container-fluid nhưng điều này dường như không phải là giải pháp tốt nhất hay là một thực hành tốt cho vấn đề đó.

Mọi hướng dẫn sẽ được đánh giá cao.

Answer 1

thời gian gần đây tôi muốn làm điều này nhưng một số trong những giải pháp tôi thấy có nhiều phức tạp hơn cần thiết. Những gì tôi đã làm là khá chính xác những gì uʍopǝpısdn đã đề xuất trong các nhận xét về câu hỏi của bạn, tức là quấn .container trong một số div.

Tôi tạo ra một số phong cách màu sắc cho mỗi phần tôi cần màu:

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

Và sử dụng những phong cách như các lớp học của mỗi gói 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 

Giải pháp này rõ ràng đòi hỏi bạn phải tái cấu trúc HTML của bạn để sử dụng một số .container cho mỗi phần thay vì một .container trên mỗi body, mà tôi thấy hoạt động khá tốt.

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> 

nghĩ rằng nó sẽ giúp u :)