引导卡不遵循列规则

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

当您向列添加边边距时，引导行的计算就会受到干扰，现在行必须与列一起容纳额外的边距，而且由于这里的行宽度是固定的，所以它将把最后一列移到下一行。您可以通过在内部容器中使用填充而不是在cols上使用裕度来达到同样的效果。

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

但你可以从上到下向科尔申请保证金，希望能有所帮助！