使用横向滚动时如何修复电影海报间间距过大问题

问题分析 #

当前布局的核心问题：

• 展示电影列表的row是flex容器，但每个电影项未设置宽度控制，导致项被不必要地拉伸，出现巨大间距；
• 电影项的m-3边距在横向布局下进一步放大了间距。

修复方案 #

1. 修改MovieList组件 #

给每个电影项添加Bootstrap的col-auto类，让宽度自适应海报内容，同时调整边距并给海报设置固定宽度，保证布局统一：

const MovieList = (props) => {
  return (
    <>
      {props.movies.map((movie, index) => (
        <div className="col-auto image-container d-flex justify-content-center my-3 mx-2">
          <img 
            src={movie.Poster} 
            alt="movie" 
            style={{ width: '180px', height: 'auto' }}
          />
        </div>
      ))}
    </>
  );
};

export default MovieList;

2. 优化横向滚动的CSS #

可选：给滚动容器添加底部内边距，避免滚动条遮挡海报：

.movie-app > .row{
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 10px;
}

说明 #

• col-auto确保每个电影项仅占据海报所需的宽度，不会被flex容器强制拉伸；
• mx-2缩小横向边距，my-3保留纵向间距，平衡布局美观度；
• 固定海报宽度让所有卡片大小一致，提升整体视觉效果。

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