Html 正在尝试使css卡翻转以在引导中对齐

我正试图得到我的卡片，我用HTML和CSS创建的能够与引导对齐。它目前只在该节的中间，我无法计算出如何将4张卡片排成一行，然后再在下面的一行中排成4行。< /P> 这是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>

卡片标题
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容

如果您制作的卡按预期工作，而现在您只想使用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 -->

卡片标题
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
卡片标题
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
卡片标题
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
卡片标题
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容
一些快速示例文本，建立在卡片标题上，并构成大部分内容
这个
卡片的内容

我已经将

行

划分为四个

列

，以便创建一个新行，您可以复制它

另外，尝试将

.card container

的宽度设置为百分比，而不是rem，以使其更包含在列中

---

希望这是你提出的，它解决了这个问题。

也请提供你的CSS。它是一个卡片翻转，所以它有一个正面和背面，背面包含链接到项目的按钮，卡片工作得很好，正好在页面的中间。当我在上面添加代码时，它会变成4张非常细长的卡片，经过下面两个部分。卡片容器{位置：相对；宽度：18rem；透视：200rem；高度：666.98px；}。卡片容器：悬停。卡片正面{变换：旋转（180度）；}。卡片容器：悬停。卡片背面{变换：旋转（0度）；}.card back{transform:rotateY（180度）；}.card{position:absolute；transition:all 0.9；height:100%；width:100%；backface visibility:hidden；}.card back.card body{position:relative；}，请检查答案，我已经编辑过了。效果很好！非常感谢。现在我可以调整一切，并将这些链接添加到HREF和图像上的网站。