如何在 Bootstrap 5 中将卡片居中

Question

            <div class="row">
                <div class="col-12">
                    <h1 class="mt-5">DANCING</h1>
                    <p class="mt-3">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
                        Provident repellendus fuga molestiae vitae ex dolore deleniti
                        assumenda fugiat ducimus incidunt!
                    </p>
                </div>
            </div>

            <div class="row justify-content-evenly mt-5">
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/2.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">AMERICA</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>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/3.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">ASIA</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>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/4.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">AUSTRALIA</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>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我试图将卡片居中，但它没有正确居中，我给了该行 3 列并均匀地划分了空间，但它仍然没有对齐

这是它的样子

https://i.stack.imgur.com/wgAr3.jpg

Answer 1

你得到的正是你所写的。3 堆，每堆 3 列，均匀对齐。您的输出之所以是这样，是因为您的卡片没有占用您分配的全部 3 列。bg-color（尝试为每个类添加不同的内容col-md-3，您会发现它是均匀分布的）。

您可能的选择：

1. 您可以使卡片占据 3 列的 100%。将您的替换width: 18rem;为width: 100%，或者您可以使用w-100Bootstrap 类。
2. 您可以向每张卡添加mx-auto，这会将其与它所具有的 3 列的中心对齐。

我推荐第二个选项，因为它不需要您更改卡的宽度。