我怎样才能使卡片在反应中与反应 bootstrap 等高？

Question

我正在使用与 react-bootstrap 的反应。我想将这些卡设计为相同的高度。例如，如附件图片所示，当我的第二张卡片标题被打破时。所以需要卡片高度，然后增加第二张和第三张卡片的高度，但是第一张卡片的卡片标题很小，所以卡片的高度较小。我想要所有这些卡片相同的高度，甚至其他卡片高度增加所有卡片高度增加。自定义 CSS 或 bootstrap 类是否可行？

Answer 1

如果您可以添加自定义 CSS，在卡的父级上使用“display:flex”应该可以解决问题。如果需要强制拉伸，可以加上"align-items: stretch".

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.card {
  background: grey;
  padding: 15px;
  width: 30%;
}

<div class="wrapper">
  <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
</div>

我怎样才能使卡片在反应中与反应 bootstrap 等高？

how can i make cards equal height in react with react bootstrap?

css

reactjs

react-bootstrap