Thùng chứa làm tổ trong thùng chứa đựng đồ chứa

Question

Tôi gặp một chút rắc rối khi nhận được câu trả lời dứt khoát về các thùng chứa trong bootstrap. Rõ ràng là bạn không được làm tổ một số .container trong một số .container-fluid và ngược lại, nhưng bạn có thể giữ một số .container trong một số .container khác không? Tôi đang cố gắng để tạo ra một bố trí có một div bên ngoài sẽ có chiều rộng đầy đủ và một div bên trong sẽ được nhỏ hơn mà giữ nội dung, một hộp trong một hộp. Tôi không chắc chắn cách thích hợp để làm điều này trong bootstrap là gì.

Answer 1

Có, không bao giờ lồng một vật chứa bên trong hộp chứa khác.

Từ Bootstrap Documents:

Container

Bootstrap đòi hỏi một yếu tố có chứa để bọc nội dung trang web và nhà hệ thống lưới điện của chúng tôi. Bạn có thể chọn một trong hai vùng chứa để sử dụng trong các dự án của bạn. Lưu ý rằng, do padding và nhiều hơn nữa, không thể chứa được bất kỳ vùng chứa nào .

Bạn có thể quấn .container bên trong lớp tùy chỉnh .outer-container có chiều rộng 100%. Đặt chiều rộng gần 75% khi kích thước màn hình bị giảm để cho thấy rằng vùng chứa bên trong có chiều rộng nhỏ hơn.

.outer-container { 
 
    background: tomato; 
 
    width: 100%; 
 
} 
 
.container { 
 
    background: lightblue; 
 
} 
 
@media (max-width: 1200px) { 
 
    .container { 
 
    width: 75%; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="outer-container"> 
 
    <div class="container"> 
 
    I am fixed 
 
    </div> 
 
</div>