从引导程序 4 中删除卡片行之间的空白答案

【问题标题】：remove white space between cards lines from bootstrap 4从引导程序 4 中删除卡片行之间的空白
【发布时间】：2021-07-30 14:56:09
【问题描述】：

我想删除卡片之间的空间（垂直）。换句话说，我希望卡片使用所有可用空间。如有必要，我可以使用插件，但我找不到任何东西（也许我没有在 google 上使用正确的关键字）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

                        <div class="row">
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem<br>ipsum</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>Lorem<br>ipsum<br>dolor<br>sit<br>met<br>a</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <h1>hello</h1>
                                    </div>
                                </div>
                            </div>
                        </div>

screenshot of the desired behavior

【问题讨论】：

你想要的是创建一个 Mansory 布局，只有 CSS 是可能的，但最好的是 javascript 库。查一下
您用 CSS 标记了这个问题，但没有提供任何内容。请更新我编辑的sn-p
@gugateider> Mansory 是我一直在寻找的。谢谢

标签： javascript html css bootstrap-4

【解决方案1】：

这是一些早期版本的引导程序的一个大问题。我们曾经对所有卡片应用最小高度，所以它们会有点对齐。

否则，我认为使用 CSS 网格会更容易。 CSS 网格确实改变了游戏规则。您可以在几分钟内完成布局，而无需处理所有框架问题。

https://jsfiddle.net/n7Ltxjdc/#&togetherjs=B4bEDiotHC

<style>
    .parent{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        background: #f7f7f7
    }
    .parent .card{
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        padding: 0 1rem; box-sizing: border-box;
    }
    @media only screen and (min-width: 600px) {
        .parent{grid-template-columns: 1fr 1fr;}
    }
    @media only screen and (min-width: 900px) {
        .parent{grid-template-columns: 1fr 1fr 1fr;}
    }
    @media only screen and (min-width: 1200px) {
        .parent{grid-template-columns: 1fr 1fr 1fr 1fr;}
    }
</style>
<div class="parent">
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
    <div class="card">
        <h3>Title 1</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur elit. 
        Proin a imperdiet sapien. Aliquam at massa nec 
        nisi facilisis ullamcorper mattis et lacus. 
        Morbi aliquam ac nisi et posuere. Mauris dictum 
        tortor id magna convallis pulvinar.
        </p>
    </div>
</div>

虽然我不确定，但也许 bootstrap 4 解决了这个问题，但我还没有收到更新。

【讨论】：