如何在Bootstrap 5列间添加间距且不改变每行列数？

你遇到的问题是因为gap-3会直接增加行内元素的间隙，导致总宽度超出容器，从而触发换行。Bootstrap 5提供了更适配的方案来解决这个问题，以下是几种可行的方法：

方法1：使用Bootstrap内置的Gutter类（推荐） #

Bootstrap的row组件自带专门控制列间距的g-*类（g是gutter的缩写），这类间距通过列的内边距和行的负外边距实现，不会影响列的宽度计算，完美适配网格系统。

修改后的代码如下：

<div class="row g-3">
    <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>

• g-3表示全局间距为0.75rem（对应Bootstrap的spacer变量），可根据需求替换为g-1到g-5，或用响应式类如g-md-3 g-sm-2适配不同屏幕。
• 列的边框会和间距自然分隔，无需额外调整。

方法2：自定义列宽度适配Gap #

如果坚持使用gap属性，可通过调整列宽抵消gap带来的总宽度增加。col-md-3默认是25%宽度，4列总宽度100%，加上gap-3（0.75rem）后总宽度会超100%，因此需要用calc计算列宽：

<div class="row gap-3">
    <div class="col-md-auto flex-grow-1" style="width: calc(25% - 0.5625rem);">
        <div class="border rounded p-2">
            <p>Column 1</p>
        </div>
    </div>
    <div class="col-md-auto flex-grow-1" style="width: calc(25% - 0.5625rem);">
        <div class="border rounded p-2">
            <p>Column 2</p>
        </div>
    </div>
    <div class="col-md-auto flex-grow-1" style="width: calc(25% - 0.5625rem);">
        <div class="border rounded p-2">
            <p>Column 3</p>
        </div>
    </div>
    <div class="col-md-auto flex-grow-1" style="width: calc(25% - 0.5625rem);">
        <div class="border rounded p-2">
            <p>Column 4</p>
        </div>
    </div>
</div>

• 计算逻辑：gap-3为0.75rem，4列有3个间隙，总间隙宽度3*0.75=2.25rem，分摊到4列每列需减去2.25/4=0.5625rem，因此列宽设为calc(25% - 0.5625rem)。
• 该方法需手动计算，灵活性不如Gutter类，不推荐作为首选。

方法3：给列添加内边距并嵌套容器 #

如果需要边框和内容之间也有间距，可在列内嵌套带边框的容器，同时给列添加p-3类实现列间间距：

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

• 该方法通过列的内边距实现间距，边框仅作用于内部容器，视觉上同样能达到列间分隔效果，适合需要内容和边框有间距的场景。

内容的提问来源于stack exchange，提问作者Jonathan Wood