Bootstrap中g-类间距失效求助：仅垂直间距无水平间距

API 探路者

2026-6-24

问题描述

使用Bootstrap的row g-3类构建商品网格布局时，仅显示垂直方向的间距，水平方向的预期间距完全缺失。已排除Bootstrap版本问题——将官方网格示例代码粘贴到同一HTML文件中，可正常显示水平和垂直间距。

相关代码如下：

<div class="container">
        <div class="row g-3">
            <div class="item col-lg-3 col-sm-6 col-12">
                <img src="./images/1.png" class="img-fluid" alt="">
                <div class="name">Chair 01</div>
                <div class="price">$200</div>
                <div class="btn btn-dark">Add To Cart</div>
            </div>

            <div class="item col-lg-3  col-sm-6 col-12">
                <img src="./images/1.png" class="img-fluid" alt="">
                <div class="name">Chair 01</div>
                <div class="price">$200</div>
                <div class="btn btn-dark">Add To Cart</div>
            </div>

            <div class="item col-lg-3  col-sm-6 col-12">
                <img src="./images/1.png" class="img-fluid" alt="">
                <div class="name">Chair 01</div>
                <div class="price">$200</div>
                <div class="btn btn-dark">Add To Cart</div>
            </div>

            <div class="item col-lg-3  col-sm-6 col-12">
                <img src="./images/1.png" class="img-fluid" alt="">
                <div class="name">Chair 01</div>
                <div class="price">$200</div>
                <div class="btn btn-dark">Add To Cart</div>
            </div>
        </div>
    </div>

页面效果：四个商品卡片在水平方向紧密贴合，无任何间距；垂直方向则显示出g-3设定的间距。

解决方案

问题根源：Bootstrap的g-*类是通过给col类元素添加左右内边距（padding）来实现水平间距的，但你的代码中将自定义的.item类直接和col类放在同一个元素上，若.item类存在覆盖padding的样式（比如padding:0），或者内部元素（如图片）设置了width:100%且未考虑内边距，就会导致水平间距被“吃掉”。
修复方法：
1. 拆分col和.item的层级：将.item从col元素上剥离，作为col的子容器存在，代码示例：

<div class="container">
    <div class="row g-3">
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="item">
                <img src="./images/1.png" class="img-fluid" alt="">
                <div class="name">Chair 01</div>
                <div class="price">$200</div>
                <button class="btn btn-dark">Add To Cart</button>
            </div>
        </div>
        <!-- 其余三个商品卡片结构同上 -->
    </div>
</div>

检查自定义样式：查看你的CSS文件，确认.item类是否有padding: 0、margin: -x或者width: 100% !important这类会干扰Bootstrap列内边距的规则，如有则删除或调整。
替换按钮标签：代码中用<div>作为按钮容器，建议改为<button>标签，符合HTML语义化同时避免潜在的样式冲突。

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