ghi đè kích thước vùng chứa bootstrap

Question

Tôi có một mẫu HTML dễ sử dụng bootstrap 3. Mẫu có cấu trúc sau: tiêu đề tĩnh, chân trang tĩnh và nội dung nằm trong lớp "Container" của bootstrap. Ở giữa nội dung tôi có bootstrap'w "Vâng" và tôi muốn nó trông giống như header và footer. Ý tôi là tôi muốn nó có chiều rộng toàn màn hình trên màn hình bất kỳ.

Tôi tạo ra dễ dàng fiddle.

Dưới đây là một câu hỏi, có cách nào để ghi đè lên chiều rộng của thùng chứa bên trong thùng chứa này?

<header> 
    <div class="container"> 
     <div class="content"> 

     </div> 
     <div class="well"> 

     </div> 
     <div class="content"> 

     </div> 
    </div> 
<footer> 

Answer 1

ORIGINAL + thực hành tốt nhất: luôn luôn di chuyển .well ngoài .container ở lại thành ngữ với Bootstrap

CẬP NHẬT + NẾU TRÊN KHÔNG PHẢI LÀ LỰA CHỌN: Cho rằng bạn không thể dễ dàng thay đổi .container phong cách và/hoặc di chuyển .well bên ngoài .container, đặt cược tốt nhất của bạn là JavaScript. Ở đây tôi đã thực hiện một kịch bản mà làm cho .well mở rộng như chiều rộng của cửa sổ thay đổi.

http://jsfiddle.net/iamnotsam/E3RQp/1/

Ý tưởng là bạn muốn có một giá trị âm cho margin-left và margin-right để .well mở rộng trên màn hình.

Answer 2

Div container có sau max-width được chỉ định trong truy vấn phương tiện như mặc định bởi bootstrap.

@media (min-width: 768px){ 
    .container{ 
    max-width:750px; 
    } 
} 

@media (min-width: 992px){ 
    .container{ 
    max-width:970px; 
    } 
} 

Để ghi đè này thêm phong cách dưới đây trong stylesheet của bạn

// Điều này sẽ được bổ sung trong phong cách mặc định, không thuộc phạm vi truy vấn phương tiện truyền thông .container { margin: 0; padding: 0; }

@media (min-width: 768px){ 
    .container{ 
    max-width:100%; 
    } 
} 

@media (min-width: 992px){ 
    .container{ 
    max-width:100%; 
    } 
} 

Answer 3

Đây theres một thủ thuật đơn giản mà làm việc như một nét duyên dáng: https://css-tricks.com/full-width-containers-limited-width-parents/

Look cho: "Không calc() cần thiết"

HTML

<header> 
    <div class="container"> 
     <div class="content"></div> 
     <div class="well full-width"></div> 
     <div class="content"></div> 
    </div> 
    <footer> 

CSS

.full-width { 
    width: 100vw; 
    position: relative; 
    left: 50%; 
    right: 50%; 
    margin-left: -50vw; 
    margin-right: -50vw; 
}