Html 引导卡不符合列规则

我的代码包含一行引导模板卡：

<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">

        <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>

          <div class="card col m-3">
            <img src="..." class="card-img-top" alt="...">
            <div class="card-body">
            </div>
          </div>
    </div>

我希望卡片在大屏幕上显示为4/行，在中屏幕上显示为2/行，在小屏幕上显示为1/行。当我从每张卡片上删除边距（

m-3

class）时，这一切都非常有效。然而，随着边距的增加，一张或多张卡片最终会被撞到另一行，如下图所示。我怎样才能在每一行都有这些固定数量的卡片，同时仍然允许这些卡片被很好地隔开

---

当您向列添加侧边距时，引导行的计算会受到干扰，现在该行也必须与列一起容纳额外的边距，并且由于此处的行宽度是固定的，因此它会将最后一列移动到下一行。通过在内部容器中使用填充，而不是在列上使用边距，可以实现相同的效果

<div id="row1-cards" class="row mx-5 mt-3 row-cols-1 row-cols-md-2 row-cols-lg-4">

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card w-100 inner-box m-3">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                </div>
            </div>
        </div>

    </div>

但是你可以从顶部和底部对cols应用边距，

---

希望有帮助

向内部容器添加填充与向卡片本身添加填充对卡片具有相同的效果。i、 这些卡片可以扩展，但每张卡片之间仍然没有我想要的间隙。你有没有试过从当前元素中删除类“card”并将其添加到内部div中？比如，如果它仍然不起作用，您可以在JSFIDLE中复制您的问题并在这里共享它的链接，这样我就可以检查到底是什么导致了问题。谢谢，我很快会尝试的，并让你知道。谢谢你的建议！成功了！非常感谢。如果您将卡片类添加到原始答案的内部div，那将非常好，这样其他人就可以看到问题是如何解决的。很高兴知道它是有效的！我还将我的原始答案编辑成了有效答案。谢谢