Bootstrap có tích hợp các lớp đệm và lề không?

Question

Bootstrap có tích hợp các lớp đệm và lề như pad-10, mar-left-10 hoặc tôi phải thêm các lớp tùy chỉnh của riêng mình? Ví dụ, tương tự như những cái here tại các tab đệm và lề.

Answer 1

.padding-xs { padding: .25em; } 
.padding-sm { padding: .5em; } 
.padding-md { padding: 1em; } 
.padding-lg { padding: 1.5em; } 
.padding-xl { padding: 3em; } 

.padding-x-xs { padding: .25em 0; } 
.padding-x-sm { padding: .5em 0; } 
.padding-x-md { padding: 1em 0; } 
.padding-x-lg { padding: 1.5em 0; } 
.padding-x-xl { padding: 3em 0; } 

.padding-y-xs { padding: 0 .25em; } 
.padding-y-sm { padding: 0 .5em; } 
.padding-y-md { padding: 0 1em; } 
.padding-y-lg { padding: 0 1.5em; } 
.padding-y-xl { padding: 0 3em; } 

.padding-top-xs { padding-top: .25em; } 
.padding-top-sm { padding-top: .5em; } 
.padding-top-md { padding-top: 1em; } 
.padding-top-lg { padding-top: 1.5em; } 
.padding-top-xl { padding-top: 3em; } 

.padding-right-xs { padding-right: .25em; } 
.padding-right-sm { padding-right: .5em; } 
.padding-right-md { padding-right: 1em; } 
.padding-right-lg { padding-right: 1.5em; } 
.padding-right-xl { padding-right: 3em; } 

.padding-bottom-xs { padding-bottom: .25em; } 
.padding-bottom-sm { padding-bottom: .5em; } 
.padding-bottom-md { padding-bottom: 1em; } 
.padding-bottom-lg { padding-bottom: 1.5em; } 
.padding-bottom-xl { padding-bottom: 3em; } 

.padding-left-xs { padding-left: .25em; } 
.padding-left-sm { padding-left: .5em; } 
.padding-left-md { padding-left: 1em; } 
.padding-left-lg { padding-left: 1.5em; } 
.padding-left-xl { padding-left: 3em; } 

.margin-xs { margin: .25em; } 
.margin-sm { margin: .5em; } 
.margin-md { margin: 1em; } 
.margin-lg { margin: 1.5em; } 
.margin-xl { margin: 3em; } 

.margin-x-xs { margin: .25em 0; } 
.margin-x-sm { margin: .5em 0; } 
.margin-x-md { margin: 1em 0; } 
.margin-x-lg { margin: 1.5em 0; } 
.margin-x-xl { margin: 3em 0; } 

.margin-y-xs { margin: 0 .25em; } 
.margin-y-sm { margin: 0 .5em; } 
.margin-y-md { margin: 0 1em; } 
.margin-y-lg { margin: 0 1.5em; } 
.margin-y-xl { margin: 0 3em; } 

.margin-top-xs { margin-top: .25em; } 
.margin-top-sm { margin-top: .5em; } 
.margin-top-md { margin-top: 1em; } 
.margin-top-lg { margin-top: 1.5em; } 
.margin-top-xl { margin-top: 3em; } 

.margin-right-xs { margin-right: .25em; } 
.margin-right-sm { margin-right: .5em; } 
.margin-right-md { margin-right: 1em; } 
.margin-right-lg { margin-right: 1.5em; } 
.margin-right-xl { margin-right: 3em; } 

.margin-bottom-xs { margin-bottom: .25em; } 
.margin-bottom-sm { margin-bottom: .5em; } 
.margin-bottom-md { margin-bottom: 1em; } 
.margin-bottom-lg { margin-bottom: 1.5em; } 
.margin-bottom-xl { margin-bottom: 3em; } 

.margin-left-xs { margin-left: .25em; } 
.margin-left-sm { margin-left: .5em; } 
.margin-left-md { margin-left: 1em; } 
.margin-left-lg { margin-left: 1.5em; } 
.margin-left-xl { margin-left: 3em; } 

Answer 2

Tôi nghĩ điều bạn đang hỏi là cách tạo khoảng cách đáp ứng giữa các lớp rows hoặc col-xx-xx.

Bạn chắc chắn có thể làm điều này với lớp col-xx-offset-xx:

<div class="col-xs-4"> 
</div> 

<div class="col-xs-7 col-xs-offset-1"> 
</div> 

Như để thêm margin hoặc padding trực tiếp đến các yếu tố, có một số cách đơn giản để làm điều này tùy thuộc vào yếu tố của bạn. Bạn có thể sử dụng btn-lg hoặc label-lg hoặc well-lg. Nếu bạn đang băn khoăn, làm thế nào tôi có thể đưa ra miếng đệm này. Thử thêm chính class name + lg hoặc sm hoặc md tùy theo nhu cầu kích thước của bạn:

<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button> 

Answer 3

Bootstrap 4 có một ký hiệu mới cho các lớp margin và padding. Tham khảo Bootstrap 4.0 Documentation - Spacing.

Từ các tài liệu:

Notation tiện ích

Spacing áp dụng cho tất cả các breakpoint, từ xs để xl, có không viết tắt breakpoint trong đó. Điều này là do các lớp đó là được áp dụng từ min-width: 0 trở lên và do đó không bị ràng buộc bởi truy vấn phương tiện . Tuy nhiên, các điểm ngắt còn lại bao gồm điểm ngắt viết tắt.

Các lớp học được đặt tên bằng cách sử dụng định dạng {property}{sides}-{size} cho xs và {property}{sides}-{breakpoint}-{size} cho sm, md, lg, và xl.

Ví dụ

.mt-0 { margin-top: 0 !important; }

.p-3 { padding: $spacer !important; }