不遵循列规则的引导卡

Question

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

<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 类）时，这非常有效。但是，添加边距后，一张或多张卡片最终会被撞到另一行，如下图所示。我怎样才能在每行中有这些固定数量的卡片，同时仍然允许卡片很好地间隔开？

Answer 1

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

<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>

但是您可以从顶部和底部对列应用边距， 希望对您有所帮助！