我使用react-bootstrap作为resposinve网格布局,使用material-ui作为组件。我想每行显示 3 个项目,第一行按预期工作,但下一行行为异常。为什么会这样?这是我的代码
const Content = ({restaurant}) => {
const restaura = _.map(restaurant, (restaurant) => {
return(
<Col xs={12} sm={12} md={4}>
<div className="card">
<div className="card-image waves-effect waves-block waves-light">
<Link to={"restaurant/" + restaurant.slug}> {restaurant.image ?
<img src={restaurant.image} alt={restaurant.name} className="activator responsive-img"/>
:<img className="activator" src="" />}
</Link>
</div>
<div className="card-content">
<Link to={"restaurant/" + restaurant.slug}><span className="card-title activator grey-text text-darken-4">{restaurant.name}</span></Link>
</div>
</div>
</Col>
);
});
return(
<div className="container-fluid">
<div className="row">
<h3 className="flow-text">Collections</h3>
</div>
<div>
<Grid>
<Row className="restaura show-grid">
{restaura}
</Row>
</Grid>
</div>
</div>
);
}
目前它看起来像附图
最佳答案
这是因为购买的图像尺寸不完全相同。图像上不同的高度导致它们在行内不清晰。
请注意,在检查器中,如果您为它们指定相同的尺寸,它将自动对齐。
您需要使它们上的 col-XX-XX 使用诸如 Flexbox 之类的东西来等于列高或使图像解析为相同的大小。
关于javascript - Bootstrap 网格项目未正确渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39824058/