如何解决React-Bootstrap-使列都具有相同的高度
以下是显示我的问题的小提琴:
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 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;
}
}
解决方法
您需要将 .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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。