reactjs - 在一行中渲染网格项目 - ReactJS 和 Material-UI
问题描述
我想创建一个材质 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>
</Box>
</Grid>
</Paper>
风格
const useStyles = makeStyles((theme) => ({
paper: {
display: "flex",
width: "auto",
},
grid: {
width: "auto",
},
arrow: {
padding: theme.spacing(3),
},
box: {
padding: theme.spacing(3),
},
}));
解决方案
在您的Grid container
添加wrap='nowrap'
道具上。其中覆盖默认值wrap='wrap'
。
<Grid
container
wrap='nowrap'
// Your other props
>
说明
默认情况下,如果物品不在容器中,它们只是简单地换行并移动到下一行。
使用wrap='nowrap'
道具,网格项目保持不变。
推荐阅读
- mysql - 上周与两周前的 MYSQL 每日数据比较
- r - 使用“SelectizeInput”在 R Shiny Dashboard Sidebar 上生成警告消息
- ajax - 当我使用像 find() 或 sync() 这样的 Eloquent 方法时,我会遇到各种错误:404 Not Found 和一些 tims 500 internal server error
- react-native - 世博会后台定时器
- python - 如何在 if 语句中调用列表的一部分?
- javascript - 如何在javascript中呈现没有换行的反斜杠
- python - 如何使用python重新格式化文件
- vue.js - 没有页面重新加载,Vuex 状态不响应
- python - 如何在 Nvidia GPU 上执行 python 脚本(在非常大的数据集上进行人脸检测)
- css - 当角度 SSR 引导应用程序时如何防止 css 动画再次出现