Làm thế nào để tạo ra một 100% chiều rộng màn hình div bên trong một container trong bootstrap?

Question

Hãy nói rằng tôi có đánh dấu sau:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      ... 
      <div class="full-width-div"> 
      </div> 
     </div> 
    </div> 
</div> 

Bây giờ làm thế nào để làm cho .full-width-div căng để toàn bộ chiều rộng của màn hình? Bởi vì hiện tại nó bị giới hạn bên trong container.

Answer 1

Bạn nên kéo mà div bên ngoài thùng. Bạn đang yêu cầu một div để kéo dài rộng hơn so với cha mẹ của nó, thường không được khuyến khích thực hành.

Nếu bạn không thể kéo nó ra khỏi div đối với một số lý do, bạn nên thay đổi phong cách vị trí với css này:

.full-width-div { 
    position: absolute; 
    width: 100%; 
    left: 0; 
} 

Thay vì tuyệt đối, bạn cũng có thể sử dụng cố định, nhưng sau đó nó sẽ không di chuyển khi bạn cuộn.

Answer 2

Lý do tại sao toàn bộ chiều rộng-div của bạn không kéo dài 100% đến màn hình của bạn vì "vùng chứa" chính của nó chỉ chiếm khoảng 80% màn hình.

Nếu bạn muốn làm cho nó kéo dài 100% đến màn hình, bạn hãy cố định vị trí "full-width-div" hoặc sử dụng lớp "container-fluid" thay vì "container".

thấy Bootstrap 3 tài liệu: http://getbootstrap.com/css/#grid

Answer 3

Bạn nên sử dụng container-fluid, không phải container. Xem ví dụ: http://www.bootply.com/onAFpJcslS