如何在Bootstrap 5中增加列之间的间距？

Question

屏幕截图

我想要这样

正如你在图片中所看到的，我不能在红色和蓝色的柱子之间留出一个空格。我试过很多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

您只需为两列之间的间隙使用像gx-1这样的gutter类：

​

<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>

​

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 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>

​