试图让 css 卡翻转以在引导程序中排队

Question

我正在尝试让我使用 HTML 和 CSS 创建的卡能够与引导程序对齐。它目前只是在该部分的中间，我不知道如何让这些卡片中的 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

如果您制作的卡片按预期工作，现在您只想使用引导程序连续显示其中四个，那么您只需将卡片 html 包装在引导网格列类中即可实现这一点：

<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，以便创建一个新行，您可以复制它。

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

希望这是您提出的问题，它可以解决问题。