如何使用 Reactstrap 自定义列

Posted 2023-03-23

【中文标题】如何使用 Reactstrap 自定义列

【英文标题】：How Customize column with 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 完成这一切

【参考方案1】：

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

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