如何使用Reactstrap自定义列

Question

我正在使用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做到这一切

Answer 1

如果您只希望在行中包含5列，则可以仅使用5个元素而无需指定其大小，它们将适合整个行宽。像这样的东西：

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