Hướng dẫn how do you put a space between rows in bootstrap? - làm thế nào để bạn đặt một khoảng cách giữa các hàng trong bootstrap?

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

Gán các giá trị margin hoặc

 class="mx-auto" style="width: 200px;">
  Centered element
0 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ừ
 class="mx-auto" style="width: 200px;">
  Centered element
1 đến
 class="mx-auto" style="width: 200px;">
  Centered element
2.

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ừ

 class="mx-auto" style="width: 200px;">
  Centered element
3 đến
 class="mx-auto" style="width: 200px;">
  Centered element
4, 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ừ
 class="mx-auto" style="width: 200px;">
  Centered element
5 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

 class="mx-auto" style="width: 200px;">
  Centered element
6 cho
 class="mx-auto" style="width: 200px;">
  Centered element
3 và
 class="mx-auto" style="width: 200px;">
  Centered element
8 cho
 class="mx-auto" style="width: 200px;">
  Centered element
9,
<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>
0,
<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>
1 và
 class="mx-auto" style="width: 200px;">
  Centered element
4.

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

  • <div class="container px-4">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    3 - Đối với các lớp học đặt margin
  • <div class="container px-4">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    5 - Đối với các lớp đặt
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0

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

  • <div class="container px-4">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    7 - ​​Đối với các lớp đặt
    <div class="container px-4">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    8 hoặc
    <div class="container px-4">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    9
  • <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    0 - Đối với các lớp đặt
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    1 hoặc
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    2
  • <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    3 - Đối với các lớp đặt
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    4 hoặc
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    5
  • <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    6 - Đối với các lớp đặt
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    7 hoặc
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    8
  • <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    9 - Đối với các lớp đặt cả
    <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    0 và
    <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    1
  • <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    2 - Đối với các lớp đặt cả
    <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    3 và
    <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    4
  • trống - cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 ở cả 4 mặt của phần tử

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

  • <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    7 - Đối với các lớp loại bỏ margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 bằng cách đặt nó thành
    <div class="container overflow-hidden">
      <div class="row gy-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    7
  • <div class="container">
      <div class="row g-2">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    1 - (theo mặc định) cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 thành
    <div class="container">
      <div class="row g-2">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    4
  • <div class="container">
      <div class="row g-2">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    5 - (theo mặc định) cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 thành
    <div class="container">
      <div class="row g-2">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    8
  • <div class="container">
      <div class="row g-2">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    9 - (theo mặc định) cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 thành
    <div class="container">
      <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
      div>
    div>
    2
  • <div class="container">
      <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
      div>
    div>
    3 - (theo mặc định) cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 thành
    <div class="container">
      <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
      div>
    div>
    6
  • <div class="container">
      <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Row columndiv>
        div>
      div>
    div>
    7 - (theo mặc định) cho các lớp đặt margin hoặc
     class="mx-auto" style="width: 200px;">
      Centered element
    
    0 thành
    <div class="row g-0">
      <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
      <div class="col-6 col-md-4">.col-6 .col-md-4div>
    div>
    0
  • <div class="row g-0">
      <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
      <div class="col-6 col-md-4">.col-6 .col-md-4div>
    div>
    1 - Đối với các lớp đặt margin 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

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>
3.)

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

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>
4 cho nội dung cấp khối có chiều rộng cố định theo chiều ngang, đó là nội dung có
<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>
5 và
<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>
6 được đặt bằng cách đặt lề ngang thành
<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>
1.

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

Cách họ làm việc

  • Máng xối là khoảng cách giữa nội dung cột, được tạo bởi ngang

     class="mx-auto" style="width: 200px;">
      Centered element
    
    0. Chúng tôi đặt
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    8 và
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    5 trên mỗi cột và sử dụng margin âm để bù đó vào đầu và cuối của mỗi hàng để căn chỉnh nội dung.
    We set
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    8 and
    <div class="container overflow-hidden">
      <div class="row gx-5">
        <div class="col">
         <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
        <div class="col">
          <div class="p-3 border bg-light">Custom column paddingdiv>
        div>
      div>
    div>
    5 on each column, and use negative margin to offset that at the start and end of each row to align content.

  • Máng xối bắt đầu ở rộng

    $grid-gutter-width: 1.5rem;
    $gutters: (
      0: 0,
      1: $spacer * .25,
      2: $spacer * .5,
      3: $spacer,
      4: $spacer * 1.5,
      5: $spacer * 3,
    );
    
    2 (
    $grid-gutter-width: 1.5rem;
    $gutters: (
      0: 0,
      1: $spacer * .25,
      2: $spacer * .5,
      3: $spacer,
      4: $spacer * 1.5,
      5: $spacer * 3,
    );
    
    3). Điều này cho phép chúng tôi khớp với lưới của chúng tôi với thang đo đệm và lề lề.
    This allows us to match our grid to the padding and margin spacers scale.

  • Máng xối có thể được điều chỉnh đáp ứng. Sử dụng các lớp máng xối dành riêng cho điểm dừng để sửa đổi máng xối ngang, máng xối dọc và tất cả các máng xối. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Máng xối ngang

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
4 Các lớp có thể được sử dụng để kiểm soát chiều rộng máng xối ngang. Phụ huynh
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
5 hoặc
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
6 có thể cần được điều chỉnh nếu các máng xối lớn hơn được sử dụng để tránh tràn không mong muốn, sử dụng tiện ích đệm phù hợp. Ví dụ, trong ví dụ sau, chúng tôi đã tăng đệm với
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
7:

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>

Một giải pháp thay thế là thêm một trình bao bọc xung quanh

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
8 với lớp
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
9:

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>

Máng xối dọc

margin0 Các lớp có thể được sử dụng để kiểm soát chiều rộng máng xối dọc. Giống như máng xối ngang, máng xối dọc có thể gây ra một số tràn dưới

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
8 ở cuối trang. Nếu điều này xảy ra, bạn thêm một trình bao bọc xung quanh
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
8 với lớp
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
9:

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>

Máng xối ngang & dọc

margin4 Các lớp có thể được sử dụng để kiểm soát chiều rộng máng xối ngang, ví dụ sau đây, chúng tôi sử dụng chiều rộng máng xối nhỏ hơn, do đó, đã giành được một nhu cầu thêm lớp trình bao bọc

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
9.

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column paddingdiv>
    div>
  div>
div>

Cột hàng máng xối

Các lớp máng xối cũng có thể được thêm vào các cột hàng. Trong ví dụ sau, chúng tôi sử dụng các cột hàng đáp ứng và các lớp máng xối đáp ứng.

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
    <div class="col">
      <div class="p-3 border bg-light">Row columndiv>
    div>
  div>
div>

Không có máng xối

Các máng xối giữa các cột trong các lớp lưới được xác định trước của chúng tôi có thể được xóa bằng margin6. Điều này loại bỏ các ____99 âm từ

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
8 và ngang
 class="mx-auto" style="width: 200px;">
  Centered element
0 từ tất cả các cột trẻ em ngay lập tức.

Cần một thiết kế cạnh từ cạnh? Thả cha mẹ

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
5 hoặc
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
6.
Drop the parent
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
5 or
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);
6.

Trong thực tế, ở đây, nó trông như thế nào. Lưu ý Bạn có thể tiếp tục sử dụng điều này với tất cả các lớp lưới được xác định trước khác (bao gồm chiều rộng cột, các tầng đáp ứng, sắp xếp lại, v.v.).

.Col-SM-6 .Col-MD-8

.col-6 .col-MD-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8div>
  <div class="col-6 col-md-4">.col-6 .col-md-4div>
div>

Thay đổi máng xối

Các lớp được xây dựng từ bản đồ SASS ____102 được kế thừa từ bản đồ SASS ____73.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Làm thế nào để bạn không gian một dòng trong bootstrap?

Khoảng cách bootstrap..
Khoảng cách trong bootstrap được triển khai bằng cách sử dụng các lớp tiện ích Bootstrap để đặt lề và đệm.....
Cú pháp chung để đặt lề hoặc đệm là ..
Với kích thước có các giá trị từ 0,25rem đến 3REM ..
CSS theo mô hình hộp để sắp xếp và đưa ra các phần tử trong trang web ..

Làm cách nào để thêm một khoảng trống giữa các cột bootstrap?

Để thêm không gian giữa các cột trong Bootstrap, sử dụng các lớp máng xối.Với máng xối, bạn có thể thêm không gian ngang hoặc dọc hoặc thậm chí chỉ định mức độ lớn của không gian trên các kích thước màn hình khác nhau.use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.

Bootstrap $ spacer là gì?

Bootstrap bao gồm một loạt các lớp, phần đệm và các lớp tiện ích khoảng cách để sửa đổi sự xuất hiện của một yếu tố.includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Giá trị spacer bootstrap là gì?

$ Spacer là một biến SASS.Theo mặc định, giá trị của nó là 1Rem.a SASS variable. By default it's value is 1rem .