<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://imgur.com/2opOvXf
1条答案
按热度按时间1u4esq0p1#
你得到的是你写的东西。3个堆栈，每一个堆栈有3列，它们均匀地对齐。你的输出是这样的原因是因为你的卡片没有把你分配的3列全部取出来。（试着给每个
col-md-3类添加一个不同的bg-color，你会看到它是均匀分布的）。您可能的选择：
1.您可以让卡占用3列的100%。将
width: 18rem;替换为width: 100%，或者您可以使用Bootstrap的w-100类。1.您可以在每张卡片上添加一个
mx-auto，这将使它与它所具有的3列的中心对齐。我推荐第二个选项，因为它不需要你改变卡的宽度。