小编Zab*_*uki的帖子

我想创建一个材质 ui 轮播，在同一行中有 3 个可见项目。当缩小浏览器的宽度时，我希望这些项目仍位于一行中，并隐藏那些不适合的项目。

这是全屏时：

这就是我想要的：

但这就是我得到的：

你对我做错了什么有什么想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid> …