Блог

Главная - Вопросы по программированию - загрузочные карты не выстраиваются горизонтально в react

загрузочные карты не выстраиваются горизонтально в react

#reactjs #alignment #react-bootstrap #card

#reactjs #выравнивание #react-bootstrap #карта

Вопрос:

У меня проблема с загрузочными картами, когда я вставляю код, они просто выстраиваются вертикально, один под другим, я делаю это путем сопоставления ответа

введите описание изображения здесь

 return (

        
            <div className="container">
                {array.map(name => (
                    < div class="card-columns ">
                        <div class='col'>
                            <div class="card ">
                                <img class="card-img-top" src=name.img" alt="Card image cap" />
                                <div class="card-body">
                                    <h5 class="card-title"> name.title </h5>
                                    <p class="card-text"> name.description</p>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div >
        }

есть ли способ выровнять их так, чтобы они были рядом друг с другом?

Комментарии:

1. Вы пробовали придать своей оболочке строку отображения flex и flex-direction?

2. Основываясь на вашем коде, похоже, что вы отображаете все в col вместо строки, верно? Я думаю, что Bootstrap различает строки и столбцы с классом?

3. Также о вашем className. card-title и card-text является классом начальной загрузки и всегда укладывается вертикально.

Ответ №1:

пожалуйста, сделайте это в таком порядке

       return (
      <div className="container">
        <div class="row">
          {array.map((name) => (
            <div class="col-sm-4">
              <div class="card ">
                <img class="card-img-top" src={name.img} alt="Card image cap" />
                <div class="card-body">
                  <h5 class="card-title"> {name.title} </h5>
                  <p class="card-text"> {name.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      }

Комментарии:

1. Да, внешний div с классом ‘row’ в основном является решением.