如何获得每行显示三个项目并均匀分布的布局soi？
如何获得每行显示三个项目并均匀分布的布局soi？
提问于 2019-01-08 06:30:16
我一直在尝试找出一种方法来显示每一行中的三个项目，并使用react js和bootstrap将它们均匀地分开。
我今天已经尝试了几个小时了，但我发现如何在页面上整合网格布局时遇到了麻烦。我让它在没有间距的情况下在每行渲染不同数量的3-4个项目，这会造成混乱的外观。但我不想这样。我想渲染3个项目，每行之间的间距。
import React from "react";
const Recipes = (props) => (
<div class="container">
<div class="row">
{ props.recipes.map((recipe)=> {
return (
<div key={recipe.recipe_id } style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
<img src={recipe.image_url} alt={recipe.title} style={{width:"200px", height:"200px"}}/>
<h3>{ recipe.title }</h3>
<h5>{`By: ${ recipe.publisher}`}</h5>
</div>
)
})}
</div>
</div>
)
export default Recipes;我让它在没有间距的情况下在每行渲染不同数量的3-4个项目，这会造成混乱的外观。但我不想这样。我想渲染3个项目，每行之间的间距。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-08 07:05:21
看起来您正在为row类使用Bootstrap，但是使用flexbox手动设置其余部分的样式。我已经有一段时间没有使用Bootstrap了，但是您应该能够将每个元素(img、h3和h5)包装在className col md-4中，以获得3个一致的列。(md-4，因为它们的网格中有12列，12 /4 =3 )。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54082784
复制相关文章
相似问题
腾讯云开发者
