我是 html、css 和 bootstrap 的新手。我在使用 card-img-top 類的影像時遇到問題。當我插入影像時，我無法弄清楚為什么它不能保持 col-sm-4 的預高度。影像尺寸：339x508。它比其他人的高度更大。這是代碼：
<div class="col-sm-4">
<div class="card" style="width: 18rem; margin-bottom: 3em;">
<img src="images/fashion.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card_title">Fashion</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-sm-4">
<div class="card" style="width: 18rem; margin-bottom: 3em;">
<img src="images/entertainment.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card_title">Entertainment</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>
uj5u.com熱心網友回復：
.card-img-top
{
height: 250px;
}
您可以像這樣設定影像的高度。
uj5u.com熱心網友回復：
<div class="col-sm-4">
<div class="card" style="margin-bottom: 3em;">
<img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card_title">Fashion</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-sm-4">
<div class="card" style="margin-bottom: 3em;">
<img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card_title">Entertainment</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>
width從卡中取出。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478198.html
上一篇：使用CSS的HTML表格列樣式
下一篇：在td中的2個按鈕之間放置空格