Bootstrap 4卡没有响应,仅将它对齐1行 [英] Bootstrap 4 card not responsive, it just align it in 1 straight row
问题描述
Bootstrap 4卡没有响应,只是将其对齐成一排.我该如何做出回应?当我调整浏览器的大小时,卡不会重新排列,因为它与流星在反应堆中保持一排.我想以一种重新排列的方式进行调整,并在调整浏览器宽度时转到下一行.
Bootstrap 4 card not responsive, it just align it in one straight row. How do I make it responsive? as i resize the browser the cards doesn't rearrange it stay as one row in meteor with react. i want to make it in a way it rearrange and go to the next row as i resize my browser width.
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>
)
}
})
推荐答案
我认为您不能,因为您正在使用card-desk
类.此类设置display: table
.前面的意思是您堆叠了卡或display: table
,但两者之间没有任何东西.
I think you can not because of you are using the card-desk
class. This class sets display: table
. The preceding means you got stacked card or display: table
and nothing between.
描述了一些技术,这些技术将display: table
和display: inline-block
更改为display: block
.请参阅:是否可以使display:table-cell布局具有响应性?
Some techniques are describe, which change the display: table
into display: block
with display: inline-block
. See: Is it possible to make display:table-cell layout responsive?
因此,请考虑将您的卡片包装在常规"网格中:
So consider to wrap your cards in a "normal" grid:
<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>
上面的代码不能保证您的卡片的高度相等,您可以设置卡片的高度,也可以使用
The code above does not guarantee that your cards got a equal heights, you can set the height of the card, or use the Responsive column resets.
或者,您也可以尝试 .card-columns
通过媒体查询更改列数:
Alternatively you can try the .card-columns
which enables you to change the number of columns with media queries:
.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;
}
这篇关于Bootstrap 4卡没有响应,仅将它对齐1行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!