如何在Bootstrap 4中创建信息框

Question

我需要创建相同长度的文本框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>

Answer 1

起初，我认为这很容易，因为您可以使用.card-columns来实现。但是后来我意识到.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>

小提琴： https://jsfiddle.net/aq9Laaew/111581/