如何在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列全部拿走。(尝试在每个col-md-3类中添加不同的bg-color，您将看到它是均匀分布的)。

您可能的选项:

1. 你可以让卡片100%占用3列。用width: 100%替换你的width: 18rem;，或者你可以使用w-100类的Bootstrap。
2. 你可以添加一个mx-auto到每个卡，这将对齐它的3列的中心。

我推荐第二种方法，因为它不需要你改变卡片的宽度。