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>

这是桌面视图

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

Answer 1

我认为是由您在Grid容器内使用<Paper>组件引起的。 <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>

在更大的屏幕上制作材料UI网格包装

1 个答案: