@evg_96

Как сделать сетку по 4 элемента в строке на реакте + bootstrap?

Есть каталог товаров. Массив товаров получается из стора. Нужно вывести это все в сетку по 4 элемента в строке и чтобы все было по центу и чтобы каждая карточка была одинаковой ширины. Подскажите как это сделать имея просто массив товаров? Не понятно как перебирая массив делать строки (className="row")

Сейчас сделал так:
<div className="container">
  <div className="row">
    {
      this.props.catalog.map(product => (
        <Card
          className="col"
          key={product.uid}
          name={product.name}
          price={product.price}
          imageUrl={product.imageUrl}
          weight={product.weight}
          diameter={product.diameter}
        />
      ))
    }
  </div>
</div>

5a92811492bbb656111499.png

На большом экране все смотрится более менее нормально. Но опять же не строго по 4 элемента. А при уменьшении размера экрана все ломается...
5a92822d0e94c095975174.png
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект