<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列的中心对齐。我推荐第二个选项,因为它不需要你改变卡的宽度。