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

Bootstrap 4：如何连续放置不同高度的卡片？

1 个答案: