Question

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

// 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()中取出它，然后插入一行，以在其中插入卡片元素。您必须决定每行要多少个项目。在下面的示例中，每行有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>

Answer 2

请尝试这个。...

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

电影卡组件...

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

如何在React中为映射方法创建的数组使用引导网格？

2 个答案: