javascript - 在更大的屏幕上使 material-ui 网格换行

Question

我正在尝试使用 Material UI 网格系统设置一个组件。

到目前为止，这是我在组件中的代码

  <Container maxWidth="lg" className={classes.container}>
         <Grid container spacing={4}>
          <Paper className={classes.paper}>
            <Grid item xs={12} lg={6} style={{padding: '10px'}}>
            <CardActionArea component="a" href="#">
              <Card className={classes.card}>
                <div className={classes.cardDetails}>
                  <CardContent>
                    <Typography component="h2" variant="h5">
                      <Title size={'28px'}>Name</Title>
                    </Typography>
                    <Typography variant="subtitle1" color="grey">
                      Occupation
                    </Typography>
                    <Typography variant="subtitle1" paragraph>
                    Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                    </Typography>
                    <CardMedia 
                    className={classes.media}
                    title="image picture"
                    image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
                  </CardContent>
                </div>
                  <p>Hello</p>
              </Card>
            </CardActionArea>
          </Grid>
          <Grid item xs={12} lg={6} style={{padding: '10px'}}>
              <Card className={classes.card}>
                <div className={classes.cardDetails}>
                  <CardContent>
                    <Typography component="h2" variant="h5">
                      <Title size={'28px'}>Name</Title>
                    </Typography>
                    <Typography variant="subtitle1" color="grey">
                      Occupation
                    </Typography>
                    <Typography variant="subtitle1" paragraph>
                    Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                    </Typography>
                    <CardMedia 
                    className={classes.media}
                    title="image picture"
                    image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
                  </CardContent>
                </div>
                  <p>Hello</p>
              </Card>
          </Grid>
          </Paper>
         </Grid>
         </Container>

这是桌面视图

问题是，无论何时在桌面模式下查看，我都希望两个网格在同一行上换行。它们适合移动设备和较小的屏幕，但我不能将这两个组件包装在桌面上，我该如何更改？

标签： javascriptcssreactjsgridmaterial-ui

Answer 1

我认为这个问题是因为您<Paper>在 Grid 容器中使用了一个组件。容器的直接子级<Grid>应该是另一个<Grid>组件。

尝试<Paper>将<Grid>. 像这样：

<Container maxWidth="lg" className={classes.container}>
   <Paper className={classes.paper}>
     <Grid container spacing={4}>
        <Grid item xs={12} lg={6} style={{padding: '10px'}}>
        <CardActionArea component="a" href="#">
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </CardActionArea>
      </Grid>
      <Grid item xs={12} lg={6} style={{padding: '10px'}}>
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </Grid>
       </Grid>
      </Paper>

     </Container>