Bootstrap 卡片不遵循列规则

Question

我的代码包含一排 bootstrap 模板卡片：

<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) 时，效果很好。然而，随着边距的增加，一张或多张卡片最终会被挤到另一行，如下图所示。我怎样才能在每行中放置这些设定数量的卡片，同时仍然允许卡片很好地间隔开？

Answer 1

当您向列添加侧边距时，bootstrap 行的计算会受到干扰，现在该行也必须适应列的额外边距，并且由于此处行的宽度是固定的，因此它将将最后一列移到下一行。您可以通过在内部容器中使用填充而不是在 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>

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

Bootstrap 卡片不遵循列规则

Bootstrap Cards Not Following Column Rules

html

css

bootstrap-4

bootstrap-cards