Как сделать так, чтобы каждая строка отображала три элемента и была равномерно разнесена?

Question

Пытались найти способ отобразить три элемента в каждом ряду и равномерно распределить их с помощью ответных js и начальной загрузки.

Я пытался сегодня часами, и мне было трудно выяснить, как добавить макеты сетки на страницу. Я получил его для рендеринга разного количества 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).