Bootstrap 4 如何在bootstrap 4中创建信息框

我需要创建3个相同长度的文本框，另一个沿着同一行的列框。然后在下一行再次显示3个文本框。我正在使用卡片课程。问题是调整第一行下方空白处的方框

<div class="row" style="margin-top:20px; padding:10px;">
            <div class="col-md-8">
                <div class="card-deck" >
                    <div class="card bg-primary">
                        <div class="card-body text-center">
                            <p>This is text inside the first card</p>
                        </div>
                    </div>
                    <div class="card bg-primary">
                        <div class="card-body text-center">
                            <p>This is text inside the first card</p>
                        </div>
                    </div>
                    <div class="card bg-primary">
                        <div class="card-body text-center">
                            <p>This is text inside the first card</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="">
                    <div class="card bg-primary">
                        <div class="card-body text-center">
                            <p class="card-text">Some text inside the first card jdnjfewhjhjdvnjerjrhifhfdjnvjerhggjew</p>
                            <p class="card-text">Some text inside the first card jdnjfewhjhjdvnjerjrhifhfdjnvjerhggjew</p>
                            <p class="card-text">Some text inside the first card jdnjfewhjhjdvnjerjrhifhfdjnvjerhggjew</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-deck" >
            <div class="card bg-primary">
                <div class="card-body text-center">
                    <p>This is text inside the first card</p>
                </div>
            </div>
            <div class="card bg-primary">
                <div class="card-body text-center">
                    <p>This is text inside the first card</p>
                </div>
            </div>
         </div>

这是第一张卡片内的文本

这是第一张卡片内的文本

这是第一张卡片内的文本

第一张卡片中的一些文本
第一张卡片中的一些文本
第一张卡片中的一些文本
这是第一张卡片内的文本

这是第一张卡片内的文本

起初，我认为这很容易，因为您可以使用

.card columns

来实现这一点。但是后来我意识到

中的卡片是从上到下，然后从左到右排列的

使用
.row
和
和
.col-*
是我能想到的获得您想要的东西的唯一正确方法

<div class="container">
    <div class="row">
        <div class="col-9">
            <div class="row">
                <div class="col-4">card with short text</div>
                <div class="col-4">card with short text</div>
                <div class="col-4">card with short text</div>
                <div class="col-4">card with short text</div>
                <div class="col-4">card with short text</div>
                <div class="col-4">card with short text</div>
            </div>
        </div>
        <div class="col-3">
            card with long text
        </div>
    </div>
</div>


短文本卡片
短文本卡片
短文本卡片
短文本卡片
短文本卡片
短文本卡片
长文本卡片

小提琴：

您在第一行下方的空白处调整方框是什么意思？你想把第二行的3个盒子合并到第一行的4个盒子里吗？像砖石风格？第1行：前三个盒子的高度相同，最后一个盒子的高度更大，它是柱。第二排：盒子应该在盒子的正下方，剩余的空间应该被第一排的最后一个盒子（高度较大的盒子）占据。非常感谢David Liang。你把我的问题分类：）