Phần đệm có được hỗ trợ trong khung công tác Twitter Bootstrap không?

Question

Tôi gặp sự cố khi hiểu khung công tác Twittter Bootstrap. Nó có cho phép đệm xung quanh các thùng chứa cơ bản không?

Dường như có lề trái 20px mặc định nhưng không có đệm. Bất kỳ ai ở đây đều có thể giải quyết vấn đề này?

http://twitter.github.com/bootstrap/ 

Điều này làm việc tốt nếu nền của bạn có màu trắng nhưng thời điểm tôi đặt màu phía sau thùng chứa, tôi không có đệm và nếu tôi thêm đệm, bố cục của tôi bị vỡ. Tôi có làm điều gì sai?

Answer 1

Lấy cảm hứng từ stackoverflow.com/a/10779289

.light { 
    -moz-box-sizing: border-box; 
    background: url(/img/background.png); 
    padding: 1em; 
} 

Answer 2

Bạn có thể overide các sitewidth trong file .less // hệ thống lưới điện và cấu trúc trang

tức là nếu bạn muốn thêm 20px để mỗi bên của 940px (20px là mặc định gridGutterWidth) bình luận ra:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

và viết:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

hủy margin-left: -20px với một quy tắc css:

.row {margin-left: 0;}

Nhưng nếu bạn sử dụng hàng lồng nhau, bạn sẽ cần phải thêm một lớp chỉ để các hàng bạn muốn thụt. Tạo một quy tắc:

.indent {margin-left: 0;}

Sau đó, trong <div class="row"> thêm trong một lớp học <div class="row indent">

Answer 3

Lấy phương pháp nêu trên và áp dụng nó để đệm cũng sẽ làm việc.

Thêm một lớp được gọi là .là độn đến khoảng mà bạn muốn PADD (trong trường hợp này span4)

<!-- Example row of columns --> 
    <div class="row"> 
    <div class="span4 is-padded"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn" href="#">View details &raquo;</a></p> 
    </div> 
    </div> 

Sau đó tạo CSS (hoặc ít hơn) làm giảm chiều rộng của nhịp bởi các áp dụng đệm, ví dụ:

/* CSS example */ 
.span4.is-padded { 
    width: 280px; /* 300 - (10x2) */ 
    padding: 10px; 
    background: #CCC; /* just so you can see it */ 
} 

/* Less example */ 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 

này một cách dễ dàng có thể được lặp lại đối với phần còn lại của lưới

.is-padded { 
    padding: @gridGutterWidth/2; 
    background: #CCC; /* just so you can see it */ 
} 
.span1.is-padded { 
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth; 
} 
.span2.is-padded { 
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth; 
} 
.span3.is-padded { 
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth; 
} 
.span4.is-padded { 
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth; 
} 
... etc 

Các điểm ngắt trong lưới đáp ứng có thể dễ dàng bị ghi đè cũng bằng cách sử dụng truy vấn phương tiện.

Phương pháp này sẽ không hoạt động trong lưới chất lỏng.