如何为Bootstrap Flex布局中的四个Div添加间距？

你当前的布局基于Bootstrap栅格系统，要给四个并排的<div>添加间距，有几种简洁且符合Bootstrap规范的方案：

方案1：使用Bootstrap内置的栅格间距类（推荐） #

Bootstrap的row组件支持g-*类（g是gap的缩写），可以直接设置列之间的水平和垂直间距，无需自定义样式。同时注意：row本身默认就是flex布局，不需要额外添加d-flex类，属于冗余代码。

修改后的父容器代码：

<div class="row mx-auto g-4" style={{ alignContent:'center' }}>....</div>

• g-4表示间距大小，可选值从g-0到g-5，也可以用响应式类比如g-lg-4 g-md-3来适配不同屏幕尺寸
• 移除了多余的d-flex，同时如果用了g-*类，justify-content: space-around可以去掉，因为g-*已经会在列之间分配均匀间距

方案2：给子列添加内/外边距 #

如果需要更细粒度的控制，可以给每个子<div>添加Bootstrap的间距类：

• 用px-3（左右内边距）：不会影响列的宽度分配，适合给列内容加间距
• 用mx-2（左右外边距）：注意如果列的总宽度（含外边距）超过容器宽度，会导致换行，需要结合栅格类调整，比如把col-lg-3改成col-lg-2来预留空间

修改后的子Div代码示例：

<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center px-3">....</div>

完整修改后的DOM结构示例 #

<div className="container mt-5 mb-5">
    <div class="row mx-auto g-4" style={{ alignContent:'center' }}>
        <div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center">
         ....
         ....
        </div>
        <!-- 另外三个子div同上 -->
    </div>
</div>

内容的提问来源于stack exchange，提问作者Daksh Rawal