css - React - Bootstrap - 使列高度相同

Question

这是一个显示我的问题的 fiddle :

https://jsfiddle.net/dbfev23h/

本质上，我有一个 React-Bootstrap <Row>标签，在它的下面，我正在映射一个我想在屏幕上呈现为“卡片”的书籍列表。但是，由于内容的大小，“卡片”的高度到处都是。如何使卡片的高度统一为该行卡片最大高度的高度？

可能有一个问题是只有一个 Bootstrap <Row> , 这是问题所在吗？

无论如何，我已经尝试过来自以下内容的建议:https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height和 Bootstrap 4 Cards of same height in columns和 Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height但没有任何效果。

这是我的实际代码:

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 因为只有这样您才能拉伸(stretch) 子元素。

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