Bootstrap 中的纠结卡片

Question

我用 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 资源管理器？

提前致谢！！！

Answer 1

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

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

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

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

包含这个之后，你必须像这样在 .row 包装器中添加 data-masonry='{"percentPosition": true }'，

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

Bootstrap 中的纠结卡片

Tangled cards in Bootstrap

flexbox

twitter-bootstrap

bootstrap-cards

输出