Question

我正在尝试生成一个三层深的网格。下面的示例：

我希望黑框延长屏幕的长度，并使三个框在同一行上对齐。我将三个盒子放在另一个网格中，最大宽度为1200px。这样在大屏幕上看起来很整洁。我希望将这三个盒子堆放在手机上。

下面是我的代码

const Landing = (props) => {

  const useStyles = makeStyles(theme => ({
      root: {
        flexGrow: 1,
      },
      blackBox:{
          color:'white',
          backgroundColor:'black',
          width:'100%',

      }, 
      white:{
          color:'white',
      }
    }));

  const classes = useStyles();

  return (

  <div className={classes.root}>
      <Grid container className={classes.blackBox}>
         <Container maxWidth="sm">
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
              <Typography>Text  </Typography>   
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text </Typography>
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text</Typography>
           </Grid>
          </Container>
      </Grid>
  </div>
);

}

export default Landing;

问题是当我添加仅允许三个装箱的最大数量达到1200的元素时，它们全部堆叠在一起。当我移除它时，它们不会堆叠，而是将整个屏幕拉长。

有人能指出我正确的方向吗？

Answer 1

您应将Container放在Grid之外

<Grid container className={classes.blackBox}>
   <Container maxWidth="sm">
      <Grid container>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
         </Grid>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
          </Grid>
          <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text</Typography>
          </Grid>
      </Grid>
   </Container>
</Grid>

React Material UI嵌套网格-不起作用

1 个答案: