如何在 Bootstrap 5 中添加列间距？

Question

screenshot

i want like this

正如您在图片中看到的，我无法在红色和蓝色列之间放置 space。我试了很多Bootstrap类，都得不到我想要的结果。我将 m-4 添加到 Navbar、Header 和下面的部分。当我在行中添加几个 div 时，左右长度（在 m-4 中相等）被扭曲。我想保持左右间距固定，调整里面的列间距。我该怎么做？

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>
<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-6 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
</section>

Answer 1

通过一些模板更改，您可以实现这一目标。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>

<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-1">

            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
</section>

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>With Proper Bootstrap - Structure</h1>

  <div class="row" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

Answer 3

所有你需要使用装订线 class 就像 gx-1 两列之间的差距：

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>With Proper Bootstrap - Structure</h1>

  <div class="row gx-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

如何在 Bootstrap 5 中添加列间距？

How to add spacing between columns in Bootstrap 5?

html

css

bootstrap-5

spacing

bootstrap-grid