Làm thế nào tôi có thể loại bỏ tất cả các lề khỏi lớp học tăng cường container-fluid và các hàng của nó?bootstrap container-fluid - loại bỏ lề đúng cách (tràn)
.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..
Vì vậy nên tôi chỉ,
body, html { overflow-x: hidden; }
Do something với .container-fluid > .row
Để cụ thể về câu hỏi của bạn:
Các .row có một trái tiêu cực và lề phải bằng với giá trị đệm trái/phải của col-*-*, đó là lý do tại sao có thanh cuộn ngang khi bạn fiddle với lưới mà không hiểu cách nó hoạt động. Nếu bạn thao tác với các lớp cột với phần đệm bằng không ở bên trái và bên phải hoặc với một số giá trị khác, lề trái trên .row phải bằng với phần đệm ở bên trái và bên phải của các cột cột. Các .container cũng có padding phù hợp với giá trị của các lớp cột để ngăn chặn các thanh cuộn.
Vì vậy, câu trả lời là: .container-fluid > .row - tạo lề: 0 ở bên trái và bên phải nếu bạn loại bỏ phần đệm ở bên trái và bên phải của các cột cột. Nếu tất cả là 0, thì bạn chỉ có thể điều chỉnh .container hoặc .container fluid với zero padding ở bên trái và bên phải, nhưng nếu bạn sử dụng các giá trị khác nhau> 15px L & R, thì đó là một câu chuyện khác nhau như .container/.container-fluid sẽ cần phải được điều chỉnh nếu phần đệm trái và phải trên các cột lớn hơn 15px.
Không có lề trên col-*-* phần đệm của nó hoàn toàn khác khi bạn sử dụng kích thước hộp: hộp biên giới trên toàn cầu như Boostrap 3.
Nếu bạn muốn có một mạng lưới chặt chẽ, loại bỏ tất cả đệm trên trái và đúng của mọi tầng lớp cột và sau đó loại bỏ các tiêu cựclề trên trái và đúng của .row và sau đó bạn có thể xóa một bên trái và bên phải đệm trên .container.
DEMO: http://jsbin.com/jeqase/2/
Loại bỏ tất cả đệm và lợi nhuận tiêu cực đối với một mạng lưới chặt chẽ và toàn bộ chiều rộng của .container với bất kỳ yếu tố xung quanh (cơ thể, html, bất cứ điều gì) với lớp .alt-grid:
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
Bạn cũng có thể thực hiện việc này với .container-fluid - điều duy nhất để thoát ra là phần đệm trái và phải.
Nếu bạn muốn loại bỏ lề, overidding các Bootstrap lớp hoặc div (container chất lỏng, html, cơ thể) là không phải là điều tốt nhất để làm. Tôi nghĩ tốt hơn nên tạo một lớp riêng biệt và thêm nó vào các phần tử. Nếu bạn muốn loại bỏ tất cả các lề:
.remove-all-margin{
margin:0 ! important;
}
Nếu bạn muốn loại bỏ tất cả lợi nhuận và miếng đệm:
.remove-all-margin-padding{
margin:0 ! important;
padding:0 ! important;
}
nó luôn luôn là một cách tốt hơn để thêm một lớp tùy chỉnh cho các yếu tố mà bạn muốn loại bỏ các lề chứ không phải là ghi đè tất cả các phần tử khởi động.
row.no-margin{ margin:0 ! important; }