尝试获得 css 卡片翻转以在 bootstrap 中排队

Question

我正在尝试让我使用 HTML 和 CSS 创建的卡片能够与 bootstrap 对齐。它目前只在该部分的中间，我不知道如何让其中的 4 张卡片排成一行，然后再将另外 4 张卡片排成一行。

这里是 HTML

    <div class="card-container mx-auto mt-5">
        <div class="row">
            <div class="card card-front">
                <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the
                        card's content.</p>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                        the
                        card's content.</p>
                    <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                </div>
            </div>
            <div class="card card-back">
                <div class="card-body bg-warning">
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

Answer 1

如果您制作的卡片按预期工作，现在您只想使用 bootstrap 连续显示其中的四张，那么您只需将卡片 html 包装在 bootstrap-网格列 类 如：

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
        <div class="col-12 col-md-3">
            <div class="card-container mx-auto mt-5">
                <div class="card card-front">
                    <img class="card-img-top" src="Assets/aspentree.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.</p>
                        <!--<a href="#" class="btn btn-primary">Go somewhere</a>-->
                    </div>
                </div>
                <div class="card card-back">
                    <div class="card-body bg-warning">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div><!-- ./col -->
    </div> <!-- ./row -->
</div><!-- ./container-fluid -->

我已将 row 分成四个 cols，因此要创建一个新行，您可以复制它。

同时尝试以百分比而不是 rem 设置 .card-container 的宽度，以使其更多地包含在列中。

希望这就是您所问的并且它能解决问题。