如何对反应中的映射方法创建的数组使用引导网格？

Question

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

//应用程序.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()，然后插入一行，您将在其中注入卡片元素。您必须决定每行需要多少项目。在下面的示例中，每行将有 12 个项目，因为一行由 12 列组成，这col-xs-1意味着每个项目将占用该行中的 1 列。

您可以使用等来根据每个屏幕尺寸来决定col-xs它col-sm......

<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>