Оберните сетки материала-интерфейса на больших экранах - PullRequest
Новая
       27

Оберните сетки материала-интерфейса на больших экранах

0 голосов
/ 29 октября 2019

Я пытаюсь настроить компонент с помощью системы координат пользовательского интерфейса Материал.

вот мой код внутри моего компонента до сих пор 

  <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>

Вот вид рабочего стола

enter image description here

Проблема в том, что я хочу, чтобы две сетки наматывались на одну строку, когда бы они ни отображались в режиме рабочего стола. Они отлично подходят для мобильных и небольших экранов, но я не могу обернуть эти два компонента на рабочем столе, как я могу это изменить?

1 Ответ

1 голос
/ 29 октября 2019

Я думаю, что проблема вызвана тем, что вы используете <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>
...