html - Bootstrap 4 : How to have cards in a row with different height?

Question

我正在尝试将两张相邻的卡片排成一行，但我遇到了一个问题，即长度较短的卡片总是自动调整自身大小以匹配较长的卡片。调整页面大小时，卡片不再相邻并折叠成单独的行，此时它们是独立的尺寸——我希望它们在任何情况下都是独立的尺寸。当我手动设置它们的高度时，它们显示为独立的尺寸，但卡片中的内容将是动态的，所以我想避免这种情况。我该怎么做呢？

  <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)

https://jsfiddle.net/fu7q6jca/

Answer 1

.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>

https://www.codeply.com/go/xDnbMaM6Dm