如何在HTML中填充网格中的空空间？

Question

当我在我的笔记记录应用上显示笔记时，这是一个网格，如果我有一个简短的笔记，那么还有空的空间。怎样才能把下面的牌往上推，然后贴在上面的牌上，就能把它填满。我使用引导程序的网格布局来显示卡片：- 看这里

我也有屏幕截图的卡片是如何看目前。

​

你可以看到卡片之间有一个缺口，我想把它补上。

这里也是一张卡的模板

    let cardTemplate = `<div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">${title.value}</h5>
                        <p class="card-text">
                            ${content.value}
                        </p>
                        <a href="#" class="btn btn-outline-primary showBtn">Show More</a>
                        <a href="#" class="btn btn-outline-danger deleteBtn">Delete</a>
                        <a href="#" class="btn btn-outline-success editBtn">Edit</a>
                    </div>
                </div>
            </div>`;

只要按一下按钮，我就把这张卡片放进div里。

        <!--displaying notes-->
        <div class="row"></div>

我没有在div上做任何css，因为我喜欢它的外观。谢谢你阅读我的查询！

Answer 1

尝试在**或h-50或h-25中添加类<div class="card h-100">h-100，这会使元素或div与高度实用程序一样高。它很容易在引导中使用。

有关引导程序中预定义的尺寸类的更多信息，请参阅此链接。