React-Bootstrap-使列具有相同的高度

Question

这是一个展示我的问题的小提琴：

https://jsfiddle.net/dbfev23h/

本质上，我有一个React Bootstrap<Row>标签，在它下面，我映射了一个我想要渲染为"的书籍列表；卡片"；到屏幕。然而，由于内容的大小；卡片"；到处都是。如何使卡片的高度一致为该行中卡片最大高度的高度？

有一件事可能是一个问题，那就是只有一个引导<Row>，这就是问题吗？

无论如何，我尝试过以下内容的建议：https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height和列中相同高度的Bootstrap 4卡，以及使ReactStrap/Bootstrap独立列中的4卡相同高度但无效。

这是我的实际代码：

export class BooksComponent extends React.PureComponent {
render() {
return (
<Row>
this.props.books.map((b, index) => (
<BookComponent
key={index}
title={b.title}
summary={b.summary}
/>
))
</Row>
);
}
}
export class BookComponent extends React.PureComponent {
render() {
return (
<Col md={4}>
<div className="book-item">
<div className="book-title">{this.props.title}</div>
<div className="book-summary">{this.props.summary}</div>
</div>
</Col>
);
}
}

SCSS

.book-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid gray;
.book-title {
font-size: 1.2rem;
font-weight: bold;
}
.book-summary {
font-size: 0.9rem;
}
&:hover {
cursor: pointer;
box-shadow: 1px 1px 5px gray;
}
}

Answer 1

您需要将.col-md-4设置为flex，因为只有您才能拉伸子元素。

.col-md-4 {
flex: 0 0 33.3333333%;
max-width: 33.3333333%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
}