如何使用 Reactstrap 自定义列答案

【问题标题】：How Customize column with Reactstrap如何使用 Reactstrap 自定义列
【发布时间】：2019-12-01 08:59:00
【问题描述】：

我正在使用 reactstrap 显示电影海报网格。

我必须显示 20 个项目，我以这种方式设置列的大小 md = {2} 为一个项目，我想每行 5 个项目，因为我总是在末尾有空格我的行。

所以我尝试了值 md={3} 但在宽屏上但列的大小太大了。

我尝试为海报添加固定宽度以减小列的大小，但在较小的设备上，网格变得混乱。

const MovieList = (props) => {
   return (
      <Container>
        <Row>
           {props.movieList.map(movie =>(
              <Col md={2}>
                <MovieListItem  key={movie.id} movie={movie} />
              </Col>
           ))}
       </Row>
      </Container>

 export default MovieList

我想自定义列的宽度以创建更小的列。

或者如果可以从 12 列增加到 16 列。

但我不知道如何使用 reactstrap 完成这一切

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

如果您只需要 5 个行中的列，您可以只使用 5 个元素而不指定它们的大小，它们将适合整个行宽。像这样的：

<Container>
    <Row>
       {props.movieList.slice(0,5).map(movie =>(
          <Col>
            <MovieListItem  key={movie.id} movie={movie} />
          </Col>
       ))}
   </Row>
</Container>

【讨论】：