使用 bootstrap 4 网格系统

Question

所以我正在努力实现以下目标：

例如，我知道我可以简单地创建 3 个等宽的 col-md-4 列，并添加带有偏移量的 Basic Card 4，但我不希望这样。因为这意味着如果Basic Card 1的内容更多，那么Basic Card 4会向下移动，右边的卡片之间会有间距。

我有以下代码，但我不明白为什么会这样显示：

Card 2 and 3 应该彼此相邻。任何人都可以解释为什么它会这样？我只是想了解它。当然，如果有我想要的解决方案，一定要:)

<div class="row">

    <div class="col-md-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    Basic card 1
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    Basic card 2
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    Basic card 3
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    Basic card 4
                </div>
            </div>
        </div>
    </div>

</div>

Answer 1

这样修复它：

<div class="row">

    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                Basic card 1<br/>
                Basic card 1<br/>
                Basic card 1<br/>
                Basic card 1<br/>
                Basic card 1<br/>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="row">                    <-- Added this extra row
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        Basic card 2
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        Basic card 3
                    </div>
                </div>
            </div>
        </div>


            <div class="card">
                <div class="card-body">
                    Basic card 4
                </div>
            </div>

    </div>
</div>