Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Bootstrap bao gồm một loạt các lớp tiện ích đáp ứng tốc độ và phần đệm để sửa đổi sự xuất hiện của yếu tố.

Làm thế nào nó hoạt động

Chỉ định các giá trị

...
4 hoặc
...
5 thân thiện với một phần tử hoặc một tập hợp con của các cạnh của nó với các lớp tốc ký. Bao gồm hỗ trợ cho các thuộc tính riêng lẻ, tất cả các thuộc tính, và các thuộc tính dọc và ngang. Các lớp được xây dựng từ bản đồ SASS mặc định từ
...
6 đến
...
7.

Ký hiệu

Các tiện ích khoảng cách áp dụng cho tất cả các điểm dừng, từ

...
8 đến
...
9, không có chữ viết tắt điểm dừng trong chúng. Điều này là do các lớp đó được áp dụng từ
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
0 trở lên, và do đó không bị ràng buộc bởi một truy vấn truyền thông. Tuy nhiên, các điểm dừng còn lại bao gồm viết tắt điểm dừng.

Các lớp được đặt tên bằng định dạng

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
1 cho
...
8 và
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
3 cho
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
4,
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
5,
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
6 và
...
9.

Nơi tài sản là một trong số:

  • .top5 { margin-top:5px; }
    .top7 { margin-top:7px; }
    .top10 { margin-top:10px; }
    .top15 { margin-top:15px; }
    .top17 { margin-top:17px; }
    .top30 { margin-top:30px; }
    
    8 - Đối với các lớp đặt
    ...
    4
  • /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    0 - Đối với các lớp đặt
    ...
    5

Đâu là một trong những:

  • /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    2 - Đối với các lớp đặt
    /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    3 hoặc
    /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    4
  • /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    5 - Đối với các lớp đặt
    /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    6 hoặc
    /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    7
  • /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    8 - Đối với các lớp đặt
    /* From bootstrap.css */ .form-group { margin-bottom: 15px; }
    9 hoặc
    0
  • 1 - Đối với các lớp đặt
    2 hoặc
    3
  • 4 - Đối với các lớp đặt cả
    5 và
    6
  • 7 - Đối với các lớp đặt cả
    8 và
    9
  • trống - cho các lớp đặt
    ...
    4 hoặc
    ...
    5 trên cả 4 mặt của phần tử

Kích thước là một trong những:

  • ...
    2 - Đối với các lớp loại bỏ
    ...
    4 hoặc
    ...
    5 bằng cách đặt nó thành
    ...
    2
  • ...
    6 - (theo mặc định) cho các lớp đặt
    ...
    4 hoặc
    ...
    5 thành
    ...
    9
  • .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
    .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
    .margin-bottom-md {margin-bottom: @line-height-computed;}
    .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
    
    0 - ​​(theo mặc định) cho các lớp đặt
    ...
    4 hoặc
    ...
    5 thành
    .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
    .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
    .margin-bottom-md {margin-bottom: @line-height-computed;}
    .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
    
    3
  • .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
    .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
    .margin-bottom-md {margin-bottom: @line-height-computed;}
    .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
    
    4 - (theo mặc định) cho các lớp đặt
    ...
    4 hoặc
    ...
    5 thành
    .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
    .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
    .margin-bottom-md {margin-bottom: @line-height-computed;}
    .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
    
    7
  • .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
    .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
    .margin-bottom-md {margin-bottom: @line-height-computed;}
    .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  
    
    8 - (theo mặc định) cho các lớp đặt
    ...
    4 hoặc
    ...
    5 thành
    .voffset  { margin-top: 2px; }
    .voffset1 { margin-top: 5px; }
    .voffset2 { margin-top: 10px; }
    .voffset3 { margin-top: 15px; }
    .voffset4 { margin-top: 30px; }
    .voffset5 { margin-top: 40px; }
    .voffset6 { margin-top: 60px; }
    .voffset7 { margin-top: 80px; }
    .voffset8 { margin-top: 100px; }
    .voffset9 { margin-top: 150px; }
    
    1
  • .voffset  { margin-top: 2px; }
    .voffset1 { margin-top: 5px; }
    .voffset2 { margin-top: 10px; }
    .voffset3 { margin-top: 15px; }
    .voffset4 { margin-top: 30px; }
    .voffset5 { margin-top: 40px; }
    .voffset6 { margin-top: 60px; }
    .voffset7 { margin-top: 80px; }
    .voffset8 { margin-top: 100px; }
    .voffset9 { margin-top: 150px; }
    
    2 - (theo mặc định) cho các lớp đặt
    ...
    4 hoặc
    ...
    5 thành
    .voffset  { margin-top: 2px; }
    .voffset1 { margin-top: 5px; }
    .voffset2 { margin-top: 10px; }
    .voffset3 { margin-top: 15px; }
    .voffset4 { margin-top: 30px; }
    .voffset5 { margin-top: 40px; }
    .voffset6 { margin-top: 60px; }
    .voffset7 { margin-top: 80px; }
    .voffset8 { margin-top: 100px; }
    .voffset9 { margin-top: 150px; }
    
    5
  • .voffset  { margin-top: 2px; }
    .voffset1 { margin-top: 5px; }
    .voffset2 { margin-top: 10px; }
    .voffset3 { margin-top: 15px; }
    .voffset4 { margin-top: 30px; }
    .voffset5 { margin-top: 40px; }
    .voffset6 { margin-top: 60px; }
    .voffset7 { margin-top: 80px; }
    .voffset8 { margin-top: 100px; }
    .voffset9 { margin-top: 150px; }
    
    6 - Đối với các lớp đặt
    ...
    4 thành tự động

(Bạn có thể thêm nhiều kích thước hơn bằng cách thêm các mục vào biến bản đồ SASS

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
8.)

Ví dụ

Dưới đây là một số ví dụ đại diện của các lớp sau:

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

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

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

Định tâm ngang

Ngoài ra, Bootstrap cũng bao gồm một lớp

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
9 cho nội dung cấp khối có chiều rộng cố định theo chiều ngang, đó là nội dung có
 class="mx-auto" style="width: 200px;">
  Centered element
00 và
 class="mx-auto" style="width: 200px;">
  Centered element
01 đặt bằng cách đặt lề ngang thành
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
6.

 class="mx-auto" style="width: 200px;">
  Centered element

508

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Làm thế nào để thêm phần đầu lề vào các yếu tố

 class="mx-auto" style="width: 200px;">
  Centered element
03 bằng cách sử dụng khung công tác Twitter Bootstrap?

Hỏi ngày 10 tháng 4 năm 2012 lúc 8:53Apr 10, 2012 at 8:53

ITSMEITSMEitsme

47.9K93 Huy hiệu vàng219 Huy hiệu bạc342 Huy hiệu Đồng93 gold badges219 silver badges342 bronze badges

Chỉnh sửa hoặc ghi đè hàng trong Twitter Bootstrap là một ý tưởng tồi, bởi vì đây là một phần cốt lõi của giàn giáo trang và bạn sẽ cần các hàng không có biên độ cao nhất.

Để giải quyết vấn đề này, thay vào đó, hãy tạo một lớp "Buffer" lớp mới thêm biên độ tiêu chuẩn mà bạn cần.

.top-buffer { margin-top:20px; }

Và sau đó sử dụng nó trên các divs hàng, nơi bạn cần một biên độ cao nhất.

...

Đã trả lời ngày 20 tháng 1 năm 2013 lúc 22:05Jan 20, 2013 at 22:05

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

AcyraacyraAcyra

15.6K15 Huy hiệu vàng43 Huy hiệu bạc53 Huy hiệu đồng15 gold badges43 silver badges53 bronze badges

7

Được rồi, chỉ để cho bạn biết những gì đã xảy ra sau đó, tôi đã sửa bằng một số lớp mới như ACYRA nói ở trên:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

Bất cứ khi nào tôi muốn tôi làm

 class="mx-auto" style="width: 200px;">
  Centered element
04

Để đáp ứng tốt hơn, bạn có thể thêm

 class="mx-auto" style="width: 200px;">
  Centered element
05 thay vì
 class="mx-auto" style="width: 200px;">
  Centered element
06 ví dụ: D

Đã trả lời ngày 20 tháng 11 năm 2013 lúc 12:39Nov 20, 2013 at 12:39

ITSMEITSMEitsme

47.9K93 Huy hiệu vàng219 Huy hiệu bạc342 Huy hiệu Đồng93 gold badges219 silver badges342 bronze badges

5

Bootstrap 3

Nếu bạn cần tách các hàng trong bootstrap, bạn chỉ cần sử dụng

 class="mx-auto" style="width: 200px;">
  Centered element
07. Điều này thêm tỷ suất lợi nhuận 15px vào cuối hàng.

Trong trường hợp của bạn, để có được phần trên cùng, bạn có thể thêm lớp này vào phần tử

 class="mx-auto" style="width: 200px;">
  Centered element
08 trước đó

/* From bootstrap.css */ .form-group { margin-bottom: 15px; }

Bootstrap 4

Bạn có thể sử dụng các lớp khoảng cách tích hợp

"T" trong tên lớp làm cho nó chỉ áp dụng cho phía "trên cùng", có các lớp tương tự cho đáy, trái, phải. Số xác định kích thước không gian.

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Robsch

9.0748 Huy hiệu vàng60 Huy hiệu bạc92 Huy hiệu Đồng8 gold badges60 silver badges92 bronze badges

Đã trả lời ngày 8 tháng 2 năm 2017 lúc 14:29Feb 8, 2017 at 14:29

BUKSYBUKSYBuksy

11K8 Huy hiệu vàng61 Huy hiệu bạc68 Huy hiệu Đồng8 gold badges61 silver badges68 bronze badges

4

Đối với khoảng cách bootstrap 4 nên được áp dụng bằng cách sử dụngBootstrap 4 spacing should be applied using

Các lớp tiện ích tốc ký

ở định dạng sau:

{property}{sides}-{size}

Nơi tài sản là một trong số:property is one of:

  • m - cho các lớp học đặt biên độ
  • P - Đối với các lớp học đặt đệm

Đâu là một trong những:sides is one of:

  • T-Đối với các lớp đặt ra tỷ lệ lợi nhuận hoặc đệm trên đỉnh
  • B-Đối với các lớp học đặt đáy lề hoặc đáy đệm
  • L-Đối với các lớp đặt lề trái hoặc phần đệm-bên trái
  • R-Đối với các lớp học đặt biên độ-phải hoặc đệm phải
  • x-cho các lớp đặt cả *-left và *-right
  • y-cho các lớp đặt cả *-top và *-bottom
  • trống - cho các lớp đặt lề hoặc đệm ở cả 4 mặt của phần tử

Kích thước là một trong những:size is one of:

  • 0 - Đối với các lớp loại bỏ lề hoặc đệm bằng cách đặt nó thành 0
  • 1 - (theo mặc định) cho các lớp đặt lề hoặc đệm thành $ spacer * .25
  • 2 - (theo mặc định) cho các lớp đặt lề hoặc đệm thành $ spacer * .5
  • 3 - (theo mặc định) cho các lớp đặt lề hoặc đệm thành $ spacer
  • 4 - (theo mặc định) cho các lớp đặt lề hoặc đệm thành $ spacer * 1.5
  • 5 - (theo mặc định) cho các lớp đặt lề hoặc đệm thành $ spacer * 3
  • Tự động - Đối với các lớp đặt lề thành tự động

Vì vậy, bạn nên làm bất kỳ điều gì trong số này:

...

Đọc các tài liệu để giải thích thêm. Hãy thử các ví dụ trực tiếp ở đây.

Babak Habibi

1.6941 Huy hiệu vàng7 Huy hiệu bạc14 Huy hiệu đồng1 gold badge7 silver badges14 bronze badges

Đã trả lời ngày 5 tháng 1 năm 2017 lúc 15:19Jan 5, 2017 at 15:19

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Rajkaran Mishrarajkaran MishraRajkaran Mishra

4.2742 Huy hiệu vàng31 Huy hiệu bạc56 Huy hiệu Đồng2 gold badges31 silver badges56 bronze badges

1

Đôi khi tỷ lệ lợi nhuận có thể gây ra các vấn đề thiết kế:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Vì vậy, tôi khuyên bạn nên tạo "các lớp đáy lề" thay vì "các lớp có tỷ lệ lợi nhuận" và áp dụng chúng cho mục trước đó.

Nếu bạn đang sử dụng Bootstrap Nhập ít các tệp Bootstrap, hãy, hãy cố gắng xác định các lớp đáy lề với không gian chủ đề Bootstrap tỷ lệ:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Đã trả lời ngày 30 tháng 7 năm 2014 lúc 6:58Jul 30, 2014 at 6:58

KURROMANKIRMANkurroman

98010 Huy hiệu bạc11 Huy hiệu đồng10 silver badges11 bronze badges

0

Tôi đã thêm các lớp này vào biểu định kiểu bootstrap của mình

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Thí dụ

 class="mx-auto" style="width: 200px;">
  Centered element
0

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Igor Ivancha

3.3374 Huy hiệu vàng30 Huy hiệu bạc39 Huy hiệu Đồng4 gold badges30 silver badges39 bronze badges

Đã trả lời ngày 2 tháng 7 năm 2014 lúc 19:42Jul 2, 2014 at 19:42

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

0

Tôi đang sử dụng các lớp này để thay đổi biên độ cao nhất:

 class="mx-auto" style="width: 200px;">
  Centered element
1

Khi tôi cần một phần tử để có khoảng cách 2EM từ phần tử trên, tôi sử dụng nó như thế này:

 class="mx-auto" style="width: 200px;">
  Centered element
2

Nếu bạn đặt trước các pixel, hãy thay đổi EM thành PX để có theo cách của bạn.

Đã trả lời ngày 9 tháng 8 năm 2014 lúc 18:14Aug 9, 2014 at 18:14

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

HexodushexodusHexodus

Huy hiệu vàng 11.8K651 Huy hiệu bạc70 Huy hiệu đồng6 gold badges51 silver badges70 bronze badges

7

Bootstrap 4 alpha, cho các ký tự Margin-top: tốc ký CSS Class Tên MT-1, MT-2 (MT-LG-5, MT-SM-2) tương tự cho phía dưới, phải, trái, và bạn cũng có lớp tự động ML- Tự động

 class="mx-auto" style="width: 200px;">
  Centered element
3

Các đơn vị là từ

...
6 đến
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
2: Trong các biến.scss có nghĩa là nếu bạn đặt MT-1, nó sẽ cho .25REM của phần trên cùng.

 class="mx-auto" style="width: 200px;">
  Centered element
4

đọc thêm tại đây

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Matt k

6.5313 Huy hiệu vàng40 Huy hiệu bạc57 Huy hiệu đồng3 gold badges40 silver badges57 bronze badges

Đã trả lời ngày 20 tháng 2 năm 2017 lúc 16:40Feb 20, 2017 at 16:40

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Thêm vào lớp này trong tệp .css:

 class="mx-auto" style="width: 200px;">
  Centered element
5

hoặc tạo một lớp mới và thêm nó vào phần tử

 class="mx-auto" style="width: 200px;">
  Centered element
6

Đã trả lời ngày 10 tháng 4 năm 2012 lúc 9:03Apr 10, 2012 at 9:03

Nielsen Ramonnielsen RamonNielsen Ramon

Huy hiệu vàng 90311 gold badge8 silver badges16 bronze badges

7

Nếu bạn muốn thay đổi chỉ trên một trang, hãy thêm quy tắc kiểu sau:

 class="mx-auto" style="width: 200px;">
  Centered element
7

Đã trả lời ngày 11 tháng 2 năm 2016 lúc 0:40Feb 11, 2016 at 0:40

FREDYFXFREDYFXfredyfx

40510 Huy hiệu bạc21 Huy hiệu đồng10 silver badges21 bronze badges

Trong bootstrap 4 alpha+ bạn có thể sử dụng cái này

 class="mx-auto" style="width: 200px;">
  Centered element
8

Các lớp được đặt tên bằng định dạng:

 class="mx-auto" style="width: 200px;">
  Centered element
11

Đã trả lời ngày 26 tháng 4 năm 2017 lúc 13:09Apr 26, 2017 at 13:09

 class="mx-auto" style="width: 200px;">
  Centered element
9

Đã trả lời ngày 7 tháng 7 năm 2017 lúc 5:55Jul 7, 2017 at 5:55

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

1

Bootstrap3

CSS (chỉ có máng xối, không có lề xung quanh):

.top-buffer { margin-top:20px; }
0

CSS (tỷ suất lợi nhuận bằng nhau xung quanh, 15px/2):

.top-buffer { margin-top:20px; }
1

Usage:

.top-buffer { margin-top:20px; }
2

(với SASS hoặc ít hơn 15px có thể là một biến từ Bootstrap)

Đã trả lời ngày 15 tháng 8 năm 2017 lúc 17:26Aug 15, 2017 at 17:26

IsometriqisometriqIsometriq

3412 Huy hiệu bạc8 Huy hiệu đồng2 silver badges8 bronze badges

.top-buffer { margin-top:20px; }
3

Mã đơn giản

Đã trả lời ngày 9 tháng 8 năm 2019 lúc 11:04Aug 9, 2019 at 11:04

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

1

Có một thủ thuật để thêm lề tự động chỉ cho hàng thứ 2+ trong container.automatically only for the 2nd+ row in the container.

.top-buffer { margin-top:20px; }
4

Thêm

 class="mx-auto" style="width: 200px;">
  Centered element
12 vào container, kết quả:

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Hoàn thành HTML:

.top-buffer { margin-top:20px; }
5

Lấy từ các mẫu chính thức.

Đã trả lời ngày 3 tháng 12 năm 2020 lúc 6:16Dec 3, 2020 at 6:16

AlamakanambraalamakanambraAlamakanambra

5.2331 Huy hiệu vàng31 Huy hiệu bạc36 Huy hiệu đồng1 gold badge31 silver badges36 bronze badges

Bạn có thể thêm mã này:

.top-buffer { margin-top:20px; }
6

Đã trả lời ngày 21 tháng 11 năm 2017 lúc 21:06Nov 21, 2017 at 21:06

Nếu bạn đang sử dụng Bootstrap 3.3.7, bạn có thể sử dụng thư viện nguồn mở Bootstrap-Spacer qua NPM

.top-buffer { margin-top:20px; }
7

Hoặc bạn có thể truy cập trang GitHub:

.top-buffer { margin-top:20px; }
8

Dưới đây là một ví dụ về cách thức hoạt động của các hàng không gian bằng lớp .Row-Spacer:

.top-buffer { margin-top:20px; }
9

Nếu bạn yêu cầu khoảng cách giữa các cột, bạn cũng có thể thêm lớp .ROW-COL-SPACER:

...
0

Và bạn cũng có thể kết hợp các lớp .Row-Spacer & .Row-Col-Spacer với nhau:

...
1

Đã trả lời ngày 9 tháng 2 năm 2019 lúc 3:19Feb 9, 2019 at 3:19

1

Bootstrap 5

Trong Bootstrap 5, bạn có thể làm điều gì đó như thế này:

...
2

trong đó x là một số từ 0 (không có khoảng trống) đến 5 (rất nhiều không gian). Để biết thêm thông tin về các kích thước lề/đệm khác nhau và điều khiển cụ thể điểm dừng, vui lòng xem các tài liệu.

Đã trả lời ngày 28 tháng 8 lúc 12:05Aug 28 at 12:05

Hướng dẫn bootstrap padding between rows - đệm bootstrap giữa các hàng

Thủ thuật của tôi. Không quá sạch, nhưng hoạt động tốt cho tôi

...
3

Đã trả lời ngày 4 tháng 2 năm 2017 lúc 3:18Feb 4, 2017 at 3:18

Asiniyasiniyasiniy

13.3K7 Huy hiệu vàng61 Huy hiệu bạc139 Huy hiệu đồng7 gold badges61 silver badges139 bronze badges

0