Bootstrap 4 个卡片网格有 1 个大卡片对齐问题

Question

我的代码：

<div class="container">
    <div class="row row-cols-xl-3 row-cols-lg-3 row-cols-md-2 row-cols-sm-2 row-cols-1">
        <div class="col col-xl-8 col-lg-8">
            <div class="card border-0">
                ...
            </div>
        </div>
        <div class="col item">
            <div class="card border-0">
                ...
            </div>
        </div>
        <div class="col item">
            <div class="card border-0">
                ...
            </div>
        </div>
        <div class="col item">
            <div class="card border-0">
                ...
            </div>
        </div>
        <div class="col item">
            <div class="card border-0">
                ...
            </div>
        </div>
        <div class="col item">
            <div class="card border-0">
                ...
            </div>
        </div>
        ...
    </div>
</div>

我得到的是这样的：

-

我想让它看起来像这样：

如何使用 Bootstrap 4 执行上述操作？ 我无法将第三张卡片对齐到第二张卡片下。

Answer 1

您需要在第一行创建 2 列，然后在第二列（右侧）创建 2 行，我认为这样就可以了