Bootstrap: Hỗ trợ bên thứ ba
Mặc dù chúng tôi không hỗ trợ bất kỳ plugin hoặc add-on nào của bên thứ 3 một cách chính thức, chúng tôi vẫn có một vài lời khuyên hỗ trợ bạn tránh khỏi các lỗi tiềm tàng trong các dự án của bạn.
Box-sizing
Một vài ứng dụng của bên thứ 3, bao gồm cả Google Maps và bộ máy tìm kiếm Google, đều bị xung đột với Bootstrap do * { box-sizing: border-box; }, một thuộc tính để padding không làm ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử. Hãy tham khảo box model và sizing trên CSS Tricks để biết thêm chi tiết.
Phụ thuộc vào từng ngữ cảnh, có thể bạn phải ghi đè nếu cần (tùy chọn 1) hoặc reset box-sizing trong tất cả các vùng (Option 2).
/* Box-sizing resets
*
* Reset individual elements or override regions to avoid conflicts due to
* global box model settings of Bootstrap. Two options, individual overrides and
* region resets, are available as plain CSS and uncompiled Less formats.
*/
/* Option 1A: Override a single element's box model via CSS */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
.box-sizing(content-box);
}
/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}