引导程序中的间隙（g-）不起作用:(

Question

我遵循引导参考上的网格示例结构，但我的代码没有水平间隙（只有垂直间隙）。这与版本无关，因为当我将示例代码粘贴到 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>

这就是结果的样子 在此输入图片描述

Answer 1

您可以采取哪些措施来尝试解决此问题。尝试使用浏览器开发人员工具检查 CSS 规则，以识别影响列间距的任何潜在冲突或覆盖。

此外，请确保容器宽度尺寸适当，以容纳列及其装订线。 Bootstrap 的网格系统依靠填充来创建这些间距，因此容器宽度不足可能会导致列在没有适当间距的情况下显得相邻。

您还可以检查应用于布局的任何自定义 CSS 样式，以确保它们不会无意中更改网格结构。

最后，检查您使用的 Bootstrap 版本是否与引用的文档或示例代码兼容，因为版本差异可能会导致意外的布局行为。通过系统地解决这些注意事项，您可以有效地诊断和纠正 Bootstrap 网格布局中缺失的水平间隙。

Answer 2

文档中并不完全清楚，但gap实用程序仅用于CSS网格布局模块，而不是您在此处尝试使用的列和行。为此，您需要为每行使用边距和填充实用程序。