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行，我认为这样就可以了