如何获得每行显示三个项目并均匀间隔的布局soi？

Question

一直在尝试找到一种方法，使用 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 个项目，中间有间距。

Answer 1

看起来您正在为行类使用 Bootstrap，但使用 flexbox 手动设置其余部分的样式。我有一段时间没有使用 Bootstrap，但是您应该能够将每个元素（img、h3 和 h5）包装在 className col-md-4 中以获得 3 个一致的列。 （md-4 因为它们的网格中有 12 列，并且 12 / 4 =3 ）。