Карта Bootstrap 4 не отвечает, она просто выравнивает ее в один прямой ряд. Как мне сделать его отзывчивым? когда я изменяю размер браузера, карты не перестраиваются, они остаются в виде одной строки в метеоре с реакцией. я хочу сделать так, чтобы он перестраивался и переходил к следующей строке, когда я изменяю ширину браузера.
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>
)
}
})
