Twitter bootstrap Bootstrap 4卡没有响应，它只是将其对齐成一排

Bootstrap 4卡没有响应，它只是将其对齐成一排。如何使其响应？当我调整浏览器的大小时，卡片不会重新排列，而是停留在meteor中的一行。我想让它以某种方式重新排列，并在调整浏览器宽度时转到下一行

BrowseCourseCard=React.createClass({
道具类型：{
courseId:React.PropTypes.string.isRequired，
标题：React.PropTypes.string.isRequired，
shortDes:React.PropTypes.string.isRequired，
},
render（）{
const courseLink=“/browsecourses/”+this.props.courseId
返回(
{this.props.title}
{this.props.shortDes}
下载5003次
)
}
})
BrowseCourses=React.createClass({
mixins:[数据]，
getMeteorData（）{
const sub=Meteor.subscribe（'getAllCourses'））
返回{
ready:sub.ready（），
allCourses:Col_allCourses.find（）.fetch（）
}
},
render（）{
如果（！this.data.ready）{
返回加载。。。
}
console.log（this.data.allCourses）
让displayCourses=this.data.allCourses.map（（数据）=>{
返回
})
返回(
{displayCourses}
)
}
})

我想您不能，因为您正在使用

卡座

课程。此类设置

显示：表格

。前面的意思是您得到了堆叠的卡片或

显示：table

，两者之间没有任何内容

本文介绍了一些技术，这些技术将

显示：表格

更改为

显示：块

，使用

显示：内联块

。见：

请考虑用“正常”网格包装你的卡：

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 &raquo; </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>
        )
    }
})

<div class="container"> 


  <div class="row">
    <div class="card col-xs-12 col-md-6 col-lg-3">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card col-xs-12 col-md-6 col-lg-3">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
     <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix hidden-sm-down hidden-lg-up"></div>
    <div class="card col-xs-12 col-md-6 col-lg-3">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card col-xs-12 col-md-6 col-lg-3">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    </div>

</div>

</div>

.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
} 
@media (min-width: 992px)  {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}