Bootstrap 中的纠结卡片 输出

如何解决Bootstrap 中的纠结卡片 输出

我使用 Bootstrap 5 并且我希望卡片放在一起 我知道你可能没有注意到所以我的意思是这张照片...... enter image description here

这是我的代码

<div class="row row-cols-2">
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/1074/200/200.jpg?hmac=o1fm0jR_nE4yW-N80QpSF9JfnnRYhRraqaTaTbCGe1c"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyfheI"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                                additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

怎么做？？？ 几乎像 Instagram Explorer？

提前致谢！！！

解决方法

您所想到的结果可以通过将 Masonry 与 Bootstrap 网格系统和卡片组件集成来实现。

Bootstrap 中不包含 Masonry，因此您必须手动将其包含在您的系统中。

在您的网页中包含此脚本标记

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>

包含此内容后，您必须将 data-masonry='{"percentPosition": true }' 像这样添加到 .row 包装器中，

<div class="row row-cols-2" data-masonry='{"percentPosition": true }'>

输出