मैं सामग्री 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>

यहाँ डेस्कटॉप दृश्य है

enter image description here

समस्या यह है कि जब भी डेस्कटॉप मोड में दृश्य होता है, तो मैं दो ग्रिड एक ही पंक्ति पर लपेटना चाहता हूं। वे मोबाइल और छोटी स्क्रीन पर ठीक से फिट होते हैं, लेकिन मैं दो घटकों को डेस्कटॉप में लपेटने के लिए नहीं कर सकता, मैं इसे कैसे बदल सकता हूं?

0
Dedi 29 अक्टूबर 2019, 14:12

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि समस्या इसलिए हुई है क्योंकि आप अपने ग्रिड कंटेनर के अंदर एक <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>
1
PreDinnerSnack 29 अक्टूबर 2019, 14:58