-1

我使用 Bootstrap 5，我希望卡片放在一起我知道你可能没有注意到所以我的意思是这张照片...... 在此处输入图像描述

这是我的代码

<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？

提前致谢！！！

4

1 回答 1

0

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

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

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

<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 }'>

输出

在此处输入图像描述

于 2021-06-20T17:10:35.920 回答