如何在 Material UI 网格中添加水平滚动

Question

我正在尝试构建具有网格布局的看板。看板中有七列。我为每一列使用了 materail Ui 网格。

\n\n

我尝试过下面的 css 但它不起作用

\n\n

overflow: auto; \n width:100%

\n\n

我也尝试过使用单列网格列表，但它也不起作用。

\n\n

import React from \'react\';\nimport PropTypes from \'prop-types\';\nimport App from "../components/App";\nimport Header from "../components/Header";\nimport { withStyles } from \'@material-ui/core/styles\';\nimport Grid from \'@material-ui/core/Grid\';\nimport GridList from \'@material-ui/core/GridList\';\nimport Paper from \'@material-ui/core/Paper\';\nimport Card from \'@material-ui/core/Card\';\nimport CardActions from \'@material-ui/core/CardActions\';\nimport CardContent from \'@material-ui/core/CardContent\';\nimport Button from \'@material-ui/core/Button\';\nimport Typography from \'@material-ui/core/Typography\';\n\nconst styles = theme => ({\n  root: {\n     flexGrow: 1,\n     marginTop: 30,\n     display: \'flex\',\n     oveflow: "auto",\n     maxWidth: "100%"\n  },\n  card: {\n    minWidth: 180,\n    marginBottom:20\n  },\n  bullet: {\n    display: \'inline-block\',\n    margin: \'0 2px\',\n    transform: \'scale(0.8)\',\n  },\n  title: {\n    fontSize: 14,\n  },\n  pos: {\n    marginBottom: 12,\n  },\n  content: {\n    flexGrow: 1\n  },\n  paper: {\n    maxWidth: 800,\n    margin: `${theme.spacing.unit}px auto`,\n    padding: theme.spacing(2)\n  },\n});\n\nfunction SimpleCard(props) {\n  const { classes } = props;\n  const bull = <span className={classes.bullet}>\xe2\x80\xa2</span>;\n\n  return (\n    <App>\n    <Header />\n    <main className={classes.content}>\n       <div className={classes.toolbar} />\n       <div className={classes.paper}>\n\n       <Grid container className={classes.root} spacing={16}>\n               <Grid item xs={2}>\n                <Paper className={classes.paper}>\n                     <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 1\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 1\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 1\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 1\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                </Paper>\n\n                </Grid>\n                <Grid item xs={2}>\n                <Paper className={classes.paper}>\n                <Card className={classes.card}>\n                    <CardContent>\n                        <Typography className={classes.title} color="textSecondary" gutterBottom>\n                        Word of the Day\n                        </Typography>\n                        <Typography variant="h5" component="h2">\n                        Task 1\n                        </Typography>\n                        <Typography className={classes.pos} color="textSecondary">\n                        adjective\n                        </Typography>\n                    </CardContent>\n                    <CardActions>\n                        <Button size="small">Learn More</Button>\n                    </CardActions>\n                </Card>\n                </Paper>\n                </Grid>\n                <Grid item xs={2}>\n                <Paper className={classes.paper}>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 1\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                </Paper>\n                </Grid>\n                <Grid item xs={2}>\n                <Paper className={classes.paper}>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day Testing\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 10000\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                </Paper>\n                </Grid>\n                <Grid item xs={2}>\n                <Paper className={classes.paper}>\n                    <Card className={classes.card}>\n                        <CardContent>\n                            <Typography className={classes.title} color="textSecondary" gutterBottom>\n                            Word of the Day Testing\n                            </Typography>\n                            <Typography variant="h5" component="h2">\n                            Task 11562\n                            </Typography>\n                            <Typography className={classes.pos} color="textSecondary">\n                            adjective\n                            </Typography>\n                        </CardContent>\n                        <CardActions>\n                            <Button size="small">Learn More</Button>\n                        </CardActions>\n                    </Card>\n                </Paper>\n                </Grid>\n        </Grid>\n       </div>\n    </main>\n    </App>\n  );\n}\n\nSimpleCard.propTypes = {\n  classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles, { withTheme: true })(SimpleCard);\n

\n\n

如何在网格列布局中添加水平滚动？

\n

Answer 1

请注意，当您缩小浏览器窗口时，它会出现水平滚动条。仅当内容溢出到浏览器窗口之外时才会出现水平滚动球。尝试将根的宽度设置为比浏览器窗口的宽度更宽。例如 2000 像素。并删除宽度：“100%”