我正在尝试将两张相邻的卡片排成一行,但我遇到了一个问题,即长度较短的卡片总是自动调整自身大小以匹配较长的卡片。调整页面大小时,卡片不再相邻并折叠成单独的行,此时它们是独立的尺寸——我希望它们在任何情况下都是独立的尺寸。当我手动设置它们的高度时,它们显示为独立的尺寸,但卡片中的内容将是动态的,所以我想避免这种情况。我该怎么做呢?
<div class="row justify-content-center">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
</div>
CSS:
.card {
width: 36rem;
}
How they look (without forced height)
How I want them to look (this is by manually styling their height, which I want to avoid)
How they look when shrinking the page (this is fine, just for reference)
最佳答案
.row
旨在包含col-
,而不是card
。将卡片放入 col-*
...
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblah</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 ml-2 mr-2 text-left">
<div class="card-body">
<p>blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</div>
</div>
</div>
关于html - Bootstrap 4 : How to have cards in a row with different height?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51529322/