Bootstrap 4 卡没有响应，它只是将它排成一排。我如何使它响应？当我调整浏览器的大小时，卡片不会重新排列，它在带有react的流星中保留为一行。我想以某种方式重新排列并在调整浏览器宽度时转到下一行。
BrowseCourseCard = React.createClass ({
propTypes: {
courseId: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired,
shortDes: React.PropTypes.string.isRequired,
},
render() {
const courseLink = "/browsecourses/" + this.props.courseId
return(
<div className="card">
<img className="card-img-top" src="img/storeImage.png" alt="Card image cap"/>
<div>
<h4 className="card-title">{this.props.title}</h4>
<p className="card-text">{this.props.shortDes}</p>
<a className="btn btn-primary" href={courseLink}> More Details » </a>
<p className="card-text"><small className="text-muted"> Downloaded 5003 times </small></p>
</div>
</div>
)
}
})
BrowseCourses = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
const sub = Meteor.subscribe('getAllCourses')
return {
ready: sub.ready(),
allCourses: Col_AllCourses.find().fetch()
}
},
render() {
if (!this.data.ready) {
return <div>Loading...</div>
}
console.log(this.data.allCourses)
let displayCourses = this.data.allCourses.map((data) => {
return <BrowseCourseCard key={data._id} courseId={data._id} title={data.title} shortDes={data.short_des}/>
})
return (
<div className="container-fluid">
<div className="card-deck-wrapper">
<div className="card-deck">
{displayCourses}
</div>
</div>
</div>
)
}
})