<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
uj5u.com熱心網友回復：
你得到的正是你所寫的。3 疊，每疊 3 列，均勻對齊。您的輸出是這樣的原因是因為您的卡片沒有占用您分配的全部 3 列。（嘗試bg-color為每個col-md-3類添加一個不同的類，您會看到它是均勻分布的）。
您可能的選擇：
- 您可以使卡片占據 3 列的 100%。更換你
width: 18rem;用width: 100%，或者您可以使用w-100類引導的。 - 您可以
mx-auto為每張卡片添加一個，這將使其與它所擁有的 3 列的中心對齊。
我建議使用第二個選項，因為它不需要您更改列的寬度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339172.html
標籤：推特引导
上一篇：如何在列內居中文本？