如何在React中用Bootstrap网格实现map生成的API数据卡片并排显示？

我来帮你搞定这个Bootstrap网格布局的问题～你现在的代码里每个卡片都单独套了container，而且没用到Bootstrap核心的row+col网格系统，所以才会默认垂直排列，只需要调整一下结构就能实现卡片并排啦！

核心修改思路 #

Bootstrap的网格遵循「container → row → col」的层级结构：

• container用来包裹整个网格区域（只需要一个即可，不用每个卡片都加）
• row是列的容器，负责消除列之间的间距
• col-*类用来定义每列的宽度，控制不同屏幕下每行显示的卡片数量

修改后的App.js代码 #

// App.js
<div>
  <FileHeader/>
  {/* 只保留一个container包裹整个卡片列表 */}
  <div className="container">
    {/* 加一个row作为所有卡片的容器 */}
    <div className="row">
      {this.state.films.map(film=>(
        {/* 每个卡片用col类控制宽度，mb-4添加底部间距避免拥挤 */}
        <div key={film.id} className="col-md-4 mb-4">
          <MovieCard film={film}/>
        </div>
      ))}
    </div>
  </div>
</div>

优化MovieCard组件（可选但推荐） #

你原来给卡片加了固定宽度style={{width:'18rem'}}，在网格布局里可以去掉这个固定值，让col类自动控制宽度，这样更适配不同屏幕尺寸。另外可以加h-100类让同一行的卡片高度保持一致，视觉上更整齐：

// MovieCard组件
render() {
  var film = this.props.film;
  return(
    {/* 去掉固定width，添加h-100让卡片高度一致 */}
    <div className='card h-100'>
      <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>
  )
}

代码解释 #

• col-md-4：表示在中等屏幕（≥768px）及以上，每行显示3张卡片（Bootstrap网格总宽度是12，12/4=3）；在小屏幕上会自动堆叠成每行1张，适配移动端
• mb-4：给每个卡片添加底部间距，避免上下卡片挤在一起
• h-100：让卡片高度占满父容器的100%，解决不同内容长度导致的卡片高度不一致问题

内容的提问来源于stack exchange，提问作者shiva addanki