Bootstrap 3 - Tại sao lớp hàng lại rộng hơn vùng chứa của nó?

Tôi mới bắt đầu sử dụng Bootstrap 3. Tôi đang gặp khó khăn khi hiểu cách lớp hàng hoạt động. Có cách nào để tránh padding-leftvà padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

Trong tất cả các hệ thống lưới, có máng xối giữa mỗi cột. Hệ thống của Bootstrap đặt một phần đệm 15px ở cả bên trái và bên phải của mỗi cột để tạo rãnh này.

Vấn đề là cột đầu tiên không được có nửa rãnh ở bên trái và cột cuối cùng không được có nửa rãnh ở bên phải. Thay vì sử dụng một số loại .firsthoặc .lastlớp trên các cột đó như một số hệ thống lưới làm, thay vào đó chúng đặt .rowlớp có lề âm phù hợp với phần đệm của các cột. Điều này "kéo" các máng xối ra khỏi cột đầu tiên và cột cuối cùng, đồng thời làm cho nó rộng hơn.

Các .rowdiv nên không bao giờ thực sự được sử dụng để giữ bất cứ điều gì khác ngoài cột lưới. Nếu đúng như vậy, bạn sẽ thấy nội dung bị dịch chuyển so với bất kỳ cột nào, như thể hiện rõ ràng trong fiddle của bạn.

CẬP NHẬT:

Bạn đã sửa đổi câu hỏi của mình sau khi tôi trả lời, vì vậy đây là câu trả lời cho câu hỏi bạn hiện đang hỏi: Thêm .containerlớp vào đầu tiên <div>. Xem ví dụ làm việc .

Với bootstrap 3.3.7, vấn đề này được giải quyết khi bao bọc .row với .container-chất lỏng.

Xem câu trả lời của tôi dưới đây cho bài viết tương tự.

Tại sao bootstrap .row có lề mặc định bên trái là -30px?

Về cơ bản, bạn sử dụng "clearfix" thay vì "row". Nó hoạt động giống hệt như "hàng" không bao gồm lề âm.

Tôi đã sử dụng lớp hàng bên trong lớp vùng chứa và vẫn gặp sự cố. Khi tôi đã thêm margin-left: auto; margin-right: auto;vào .rowlớp nó làm việc tốt.

@Michelle M. sẽ nhận được toàn bộ tín dụng cho Câu trả lời này.
Cô ấy nói trong một trong những Bình luận:

Việc thêm lớp 'mx-auto' trong bootstrap 4 đã khắc phục sự cố tràn cho tôi.

Bạn cần cập nhật divPhần tử đầu tiên của mình như sau:

<div class="row mx-auto" style="background:#000000">

Không cần phải làm điều này cho tất cả các Hàng lồng nhau (nếu bạn có chúng).
Chỉ cần thêm mx-autovào ngoài cùng row(hoặc Hàng) để tránh Thanh cuộn dọc.
Không Ghi đè hành vi của tất cả các Hàng Bootstrap bằng cách thêm một lớp "hàng" để thay thế Lề.

Đối với bất kỳ nhà phát triển nào trong tương lai gỡ lỗi vấn đề này:

Bootstrap đặt đệm cho các cột hàng, vì vậy không nội dung nào của hàng xuất hiện bên ngoài vùng chứa. Nếu bạn đang gặp phải điều này và bạn đang sử dụng hệ thống lưới của bootstrap một cách chính xác bằng cách sử dụng các lớp col -..., thì có khả năng bạn có CSS ​​bổ sung ở đâu đó đặt lại phần đệm trên các cột.