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

Posted 2023-03-28

【中文标题】试图让 css 卡翻转以在引导程序中排队

【英文标题】：Trying to get a css card flip to line up in bootstrap

【发布时间】：2020-10-06 17:28:57

【问题描述】：

我正在尝试让我使用 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" >
                <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>

【问题讨论】：

请同时提供您的 css。

这是一个卡片翻转，所以它有正面和背面，背面包含将链接到项目的按钮

【参考方案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" >
                    <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" >
                    <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" >
                    <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" >
                    <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，以使其更多地包含在列中。

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

【讨论】：

这张卡片很好用，它就在页面的中间。当我添加上面的代码时，它变成了 4 张非常细长的卡片，通过了接下来的两个部分

.card-container 位置：相对；宽度：18rem；视角：200rem；高度：666.98px； .card-container:hover .card-front 变换：rotateY(180deg); .card-container:hover .card-back 变换：rotateY(0deg); .card-back 变换：rotateY(180deg); .card 位置：绝对；过渡：全部 0.9s；高度：100%；宽度：100%；背面可见性：隐藏； .card-back .card-body 位置：相对； .card-body a 位置：绝对；最高：50%；左：50%；保证金：-15% 0 0 -23%；

CSS 高于 ^^^^^^

好的，我知道是什么问题了，请检查答案，我已经编辑了。

完美运行！非常感谢。现在我可以调整所有内容并将这些链接添加到 href 和图像上的网站。