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

iklwldmw 于 9个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(170)

我从一个API中提取数据，并Map到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>
  )
}

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/56514321/how-to-a-use-bootstrap-grid-for-an-array-created-by-a-map-method-in-react

3条答案

按热度按时间

hrysbysz1#

你应该只有一个容器来存放你的物品，所以把它从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>

字符串

赞(0）回复(0）举报 9个月前

cld4siwp2#

请试试这个...

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

字符串
Moviecard component.

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

型

赞(0）回复(0）举报 9个月前

3vpjnl9f3#

当我们开始在React中使用Bootstrap时，特别是在网格系统中，我们必须在div.row元素之后（在“row”类之后）进行Map。

赞(0）回复(0）举报 9个月前