css - 如何在 react 中为由 map 方法创建的数组使用 Bootstrap 网格？

Question

我正在从 api 中提取数据并映射到 JSON 数组以显示结果，如何使用 Bootstrap 网格使元素并排显示，而不是像列表一样显示？

//App.js

<div>
  <FileHeader/>
  {this.state.films.map(film=>(
    <div className="container">
      <div key={film.id} id='cardItem' className=''>
        <MovieCard film={film}/>
      </div>
    </div>               
  ))}
</div>

这是 MovieCard 组件

render() {
  var film = this.props.film;

  return(
    <div className='card' style={{width:'18rem'}}>
      <div className="card-body">
        <h5 className="card-title">{film.title}</h5>
        <h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
        <p className='card-text'>{film.description}</p>
      </div>
    </div>
  )
}

如何使用网格元素并排显示卡片？

Answer 1

您的元素应该只有 1 个容器，因此请从 map() 中取出。 ，然后插入一行，您将在其中注入(inject)卡片元素。您必须决定每行需要多少元素。在下面的示例中，每行将有 12 个元素，因为一行由 12 列和 col-xs-1 组成。表示每个元素将占一行中的 1 列。
您可以使用 col-xs 来决定每个屏幕尺寸。 , col-sm ETC...

<div className="container">
  <div className="row">
    {this.state.films.map(film => (
      <div key={film.id} id="cardItem" className="col-xs-1">
        <MovieCard film={film} />
      </div>
    ))}
  </div>
</div>