Đơn vị anh hùng đầy đủ chiều rộng trong Twitter Bootstrap

Question

Trong this example layout Tôi muốn đơn vị anh hùng chỉ rộng 100% và nằm trong lưới mặc định. Ví dụ: check this site. Nó chỉ có phần đơn vị anh hùng (khu vực trưng bày) ở chiều rộng đầy đủ và phần còn lại ở chiều rộng cố định (điều hướng, nội dung dưới cùng, chân trang).

Tôi cần thực hiện việc này mà không làm mất tính năng thiết kế đáp ứng.

Answer 1

di chuyển .hero-unit div của bạn bên ngoài .container div.

kiểu .container giới hạn bạn với chiều rộng đã đặt. và bất kỳ thứ gì bên trong nó sẽ có chiều rộng tối đa của bố mẹ nó. thay vì:

<div class="container"> 
    <div class="hero-unit"> 
    </div> 
</div> 

sử dụng:

<div class="hero-unit"> 
</div> 
<div class="container"> 
</div> 

Answer 2

Vâng câu trả lời là đúng, nhưng bất cứ khi nào bạn thay đổi kích thước trang web, anh hùng đơn vị sau đó sẽ thay đổi để có các khoảng trống xung quanh (20px đúng, 20px trái) vì tất cả các yếu tố được ràng buộc với điều này body has paddings in @media max-width: 767px. Chỉ cần mã dưới đây để sửa chữa nó quá:

@media (max-width: 767px) { .hero-container { margin-right: -20px; lề trái: -20px; } }