Bootstrap 3 Thùng chứa chất lỏng với nội dung trung tâm

Question

Tôi chắc chắn đây có thể là một đơn giản nhưng tôi chưa tìm ra.

Làm cách nào để bạn tạo vùng chứa chất lỏng toàn màn hình và có nội dung, bao gồm điều hướng, được căn giữa trên trang, như trong vùng chứa không chứa chất lỏng?

Tôi chỉ đang cố gắng lấy nền điều hướng/tiêu đề hàng đầu để trải dài trên trang trong khi vẫn giữ nội dung ở độ rộng cố định.

Answer 1

Bạn có thể bao quanh .container với nội dung điều hướng của mình bằng một <div> khác mà bạn thêm kiểu nền. Xem ví dụ sau:

.background { 
 
    background-color: #f99; 
 
} 
 

 
.content { 
 
    background-color: #9f9; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="background"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 content">Content</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Một phương pháp thô là sử dụng các khái niệm lưới Bootstrap. Bootstrap chia hàng của bạn thành 12 colums. Bí quyết bao gồm việc chèn khối không gian 4 màu đen trước và một sau khối 4 dấu cách của bạn. Ví dụ:

<div class="container-fluid"> 
 
\t <div class="row"> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
     
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <h2>Title</h2> 
 
\t \t \t <p>Your content here</p> 
 
\t \t </div> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
\t </div> 
 
</div>