使用Bootstrap col-md-4实现三列布局时列间无间距问题求助

问题原因 #

Bootstrap 5 栅格系统的列间距默认通过列元素的左右padding实现，你直接将带背景色的category-blocks类绑定在了.col-md-4列元素上，padding区域会被背景色填充，因此看不到列之间的间距。

修复方案 #

按以下两步修改即可：

• 拆分列元素和内容容器：不要把背景样式绑定在列元素上，把category-blocks类挪到列内部的内容容器上
• 可选：给外层row添加gutter类自定义间距大小，比如g-3、g-4，数值越大间距越大

关键代码修改示例 #

原来的列结构：

<div class="col-md-4 category-blocks">
    <div class="col-md-12">
        <!-- 内容 -->
    </div>
</div>

修改后的列结构：

<div class="col-md-4">
    <div class="category-blocks h-100">
        <!-- 内容 -->
    </div>
</div>

外层row修改（可选，调整间距大小）：

<div class="row g-4">

这里加h-100类是为了保证三个内容区块高度自动对齐，不会出现高度不一致的问题。

修改后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap');
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");

    #categories{
  text-align: center;
  padding: 2rem 0;
}

#categories h1{
margin-bottom:5rem;
}

.category-blocks h3{
font-size: x-large;
margin: 1rem 0;

}
.category-blocks{
background-color: lightgreen;
padding: 1rem;
}
.category-blocks p{
  width: 80%;
margin: 1rem 0;
margin: auto;
text-align: justify;
margin-bottom: 1rem;

}
.category-blocks .btn-primary{
  border-radius: 2rem;
  background-color: transparent;
  border:2px solid #03bf72;
  padding: 0.7rem 1.8rem;
  color: #03bf72;
}
.category-blocks .fas{
  color: #03bf72;
  font-size: 1.5rem;
}

</style>
<body>
    <section id="categories">
        <div class="row g-4">

            <div class="col-md-4">
                <div class="category-blocks h-100">
                    <i class="fas fa-bullhorn"></i>
                        <h3>Effective Marketing</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
                        <button class="btn btn-primary">Learn more</button>
                </div>
            </div>

            
            <div class="col-md-4">
                <div class="category-blocks h-100">
                    <i class="fas fa-bullhorn"></i>
                        <h3>Effective Marketing</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
                        <button class="btn btn-primary">Learn more</button>
                </div>
            </div>

            
            <div class="col-md-4">
                <div class="category-blocks h-100">
                    <i class="fas fa-bullhorn"></i>
                        <h3>Effective Marketing</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
                        <button class="btn btn-primary">Learn more</button>
                </div>
            </div>

        </div>
    </section>
</body>
</html>

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