在 Bootstrap 列之间添加边距

Question

我在 Bootstrap 5 中有如下列。

<div class="row">
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 1</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 2</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 3</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 4</p>
    </div>
</div>

有了边框，我可以看到列之间没有间距。所以我将顶级

<div>

更改为

class="row gap-3"

。

这正确地在每列之间留出了一个空格。然而，它也会导致第四列换行。

有没有什么方法可以在每列之间放置一个空格，但不改变每行的列数？

Answer 1

使用间隙与列

对固定大小的列使用 gap 会导致不必要的列换行。使其发挥作用的关键是使用可根据间隙调整的自动调整大小的列。

通过使用

col

而不是

col-3

，列会调整以适应可用空间。如果列需要在特定的断点处翻转到行，则使用不带列宽的

col-<breakpoint>

，例如

col-lg

（该演示未指定断点，因此它可以在代码片段中运行。）

/* debug only */
.row>div {
  background: lightgray;
  border: thin solid black;
}

<div class="row gap-3 text-center">
  <div class="col">C1</div>
  <div class="col">C2</div>
  <div class="col">C3</div>
  <div class="col">C4</div>
</div>
<hr>
<div class="row gap-3 text-center">
  <div class="col">C1</div>
  <div class="col">C2</div>
  <div class="col">C3</div>
  <div class="col">C4</div>
  <div class="col">C5</div>
  <div class="col">C6</div>
</div>
<!-- 
These fixed column alternatives have unwanted column wrapping

<div class="row row-cols-4 gap-3 text-center">
  <div>C1</div>
  <div>C2</div>
  <div>C3</div>
  <div>C4</div>
</div>

<div class="row gap-3 text-center">
  <div class="col-3">C1</div>
  <div class="col-3">C2</div>
  <div class="col-3">C3</div>
  <div class="col-3">C4</div>
</div>

-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">