2013-10-01 13 views
21

bố trí của tôi tan vỡ khi tôi thực hiện bootstrap suốt chặng đường một nửa số dự án của tôi, cố định với một số sửa đổi css, và tôi đã nhận xét ra nàytwitter bootstrap hộp cỡ hủy hoại bố trí của tôi

/**, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}*/ 

trong bootstrap.css , điều đó có ảnh hưởng đến cốt lõi của nó không? Tôi chỉ muốn sử dụng hệ thống lưới điện trong dự án của mình ..

Trả lời

9

Có, đừng làm vậy. Xóa box-sizing: border-box sẽ làm hỏng lưới của bạn. Xem thêm: Why did Bootstrap 3 switch to box-sizing: border-box?

Một ví dụ để hiển thị những gì sẽ xảy ra:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
    </div> 
</div> 
<br> 
<div class="container nonborderbox" style="background-color:lightblue;">  
    <div class="row" style="background-color:red;"> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
     <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div> 
    </div> 
</div> 

Với:

.nonborderbox * 
{ 
-webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
     box-sizing: content-box; 
} 

trên sẽ dẫn đến:

enter image description here

Với box-sizing: border-box các máng xối xây dựng bởi paddin g sẽ được tính toán chiều rộng cột của bạn.

Cố gắng hiểu lưới của Bootstrap và box-sizing: border-box và tìm hiểu lý do tại sao điều này sẽ làm hỏng bố cục của bạn. Khắc phục sự cố này hoặc xem xét không sử dụng Bootstrap cho tất cả các dự án của bạn.

+5

Tôi đang sử dụng CodeMirror. Nó trở nên điên rồ với 'hộp kích thước: hộp biên giới'. Tôi có nên hiểu những gì sai trong tất cả các thành phần của bên thứ ba mà tôi sử dụng, hay đó là một Bootstrap để đổ lỗi? –

+0

Tôi phải đồng ý với @ polkovnikov.ph. Tôi đang gặp vấn đề tương tự với thư viện lịch trình DHTML vì Twitter đang ghi đè css được tạo bởi các tập lệnh. Nếu tôi tắt kích thước hộp tất cả mọi thứ hiển thị như nó cần, với lịch. –

+0

@TomT Tôi đã quan tâm đến lý do tại sao 'box-sizing' được thiết lập theo cách đó trong Bootstrap. Đó là tính năng "musthave" để làm cho cột hoạt động. CodeMirror đã thêm một 'box-sizing' rõ ràng vì tôi đã viết nhận xét đó. Có vẻ như việc sửa chữa khả thi duy nhất là làm cho mã bị phá vỡ 'hộp-sizing'-agnostic. –

51

Tôi có cùng vấn đề và bootstrap 3 phá hủy bố cục hiện tại của tôi và tiện ích của bên thứ ba. Dưới đây là một số điều tôi đã cố gắng để tăng độ khó và sự ổn định.

Way dễ nhất

an toàn chỉ khi bạn không sử dụng các thành phần bootstrap khác

Thêm css sau đây sau khi bootstrap css được nạp:

*, 
*:before, 
*:after { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
      box-sizing: content-box; 
} 

.container .row *, 
.container .row *:before, 
.container .row *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

này sẽ sử dụng border-box kích thước chỉ cho các phần tử trong hệ thống lưới điện. Điều này sẽ không hoạt động nếu bạn có các tiện ích tùy chỉnh trong lưới vì chúng vẫn có thể áp dụng border-box.

phương pháp nhắm mục tiêu hơn

an toàn chỉ khi bạn không sử dụng các thành phần bootstrap khác

Ngoài ra, bạn có thể thêm một lớp tùy chỉnh col cho mọi div cột mà đã có một col-*-* áp dụng như sau:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3 col">Grid still works</div> 
     <div class="col-md-9 col">:)</div> 
    </div> 
</div> 

sau đó sử dụng css sau thay vì:

*, 
*:before, 
*:after { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
      box-sizing: content-box; 
} 

.container .row .col, 
.container .row .col:before, 
.container .row .col:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Điều này làm việc tốt nếu bạn CHỈ cần sử dụng hệ thống lưới khởi động trong dự án của bạn. Tuy nhiên, nếu bạn dự định sử dụng các thành phần bootstrap khác, tôi không khuyên bạn nên sử dụng phương pháp này vì các thành phần bootstrap khác sẽ phụ thuộc vào border-box đang được thiết lập.

Cherry-chọn mỗi phần tử chứa để sửa chữa

Một cách vẫn tốt hơn là nên chỉ ghi đè lên các hộp kích thước như content-box trên một yếu tố phụ huynh cụ thể đối với một widget như thế này:

.your-custom-widget-class *, 
.your-custom-widget-class *:before, 
.your-custom-widget-class *:after { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
      box-sizing: content-box; 
} 

này cách tiếp cận cung cấp khả năng tương thích tốt nhất về phía trước với các thành phần bootstrap trong tương lai, ngay cả khi nó có vẻ đang hoạt động cho bạn bây giờ.

+3

Cảm ơn bạn đã tiết kiệm trong ngày! –

+0

Tôi gặp sự cố khi cố gắng sử dụng hộp kiểm ngữ nghĩa-ui với bootstrap. Sử dụng phương pháp cuối cùng của user193130 đã thực hiện thủ thuật. Tuyệt vời!! – Saroj

+1

Đây phải là câu trả lời. Ý tưởng rất hay! – camou

3

Thêm số này vào mixin hoặc biến ít hơn và đảm bảo tải sau khi giàn giáo. Không cần Nó đặt lại kích thước hộp bs3 và áp dụng lại thành các phần tử cụ thể và tất cả các phần tử bắt buộc BS3. tôi thấy rằng hầu hết mớ hỗn độn tạo ra bởi các kích thước hộp BS3 mặc định là khi nó được áp dụng cho

a,ul,li 

Sự kỳ diệu

* { 
    .box-sizing(content-box); 
} 
form, 
div, 
img, 
table, 
th, 
tr, 
td, 
p, 
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary, 
audio, 
canvas, 
progress, 
video, 
[class^="container-"], 
[class^="container-"] *, 
[class^="col-"], 
[class^="col-"] *, 
[class^="form-"], 
[class^="form-"] *, 
[class^="bg-"], 
[class^="bg-"] *, 
[class^="navbar"], 
[class^="navbar"] *, 
[class^="nav"], 
[class^="nav"] *, 
[class^="row"], 
[class^="row"] * { 
    .box-sizing(border-box); 
} 
0

tôi đã sử dụng một sự kết hợp các giải pháp nêu trên để phù hợp với nhu cầu của tôi (tôi đã sử dụng chỉ hệ thống lưới điện, mọi thứ khác đã có sẵn)

/* *, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
*/ 


[class^="container-"], 
[class^="container-"] *, 
[class^="col-"], 
[class^="col-"] *, 
[class^="row"], 
[class^="row"] * { 
    box-sizing:border-box; 
} 

Lưới đang lấy quá nhiều lề và đệm vì vậy tôi thay thế tất cả các

padding-right:15px; 
padding-left:15px; 
margin-left=-15px; 
margin-right=-15px; 

đến (Tôi nhận xét ra bên lề)

.row { 
/* margin-left: -15px; 
margin-right: -15px;*/ 
} 

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    position: relative; 
    min-height: 1px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 
Các vấn đề liên quan