Javascript 在较大的屏幕上使材质ui网格包裹
我正在尝试使用MaterialUI网格系统设置一个组件 这是我的组件中的代码Javascript 在较大的屏幕上使材质ui网格包裹,javascript,css,reactjs,grid,material-ui,Javascript,Css,Reactjs,Grid,Material Ui,我正在尝试使用MaterialUI网格系统设置一个组件 这是我的组件中的代码 <Container maxWidth="lg" className={classes.container}> <Grid container spacing={4}> <Paper className={classes.paper}> <Grid item xs={12} lg={6} style={{padd
<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>
名称
职业
毛里斯·欧波提托·多洛。无糖无糖苏打水。Morbi tincidunt mattis前欧盟分子。悬挂式权杖是我最喜欢的。一只猫，一只猫，一只猫，一只猫。Etiam eget hendrerit neque，vitae ornare nisi。这是一种新的生活方式，一种新的生活方式。维利特之争，欧盟之争，温和的普尔文纳自由。当我们面对最终的挑战时，坐在艾米特·拉奥里特·普鲁斯·尤里西斯的位子上。
你好
名称
职业
毛里斯·欧波提托·多洛。无糖无糖苏打水。Morbi tincidunt mattis前欧盟分子。悬挂式权杖是我最喜欢的。一只猫，一只猫，一只猫，一只猫。Etiam eget hendrerit neque，vitae ornare nisi。这是一种新的生活方式，一种新的生活方式。维利特之争，欧盟之争，温和的普尔文纳自由。当我们面对最终的挑战时，坐在艾米特·拉奥里特·普鲁斯·尤里西斯的位子上。
你好
问题是，每当视图处于桌面模式时，我都希望两个网格环绕在同一条线上。它们非常适合移动和更小的屏幕，但我无法将这两个组件包装在桌面上，我如何才能改变这一点？我认为问题的原因是您在网格容器中使用了
<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>
名称
职业
毛里斯·欧波提托·多洛。无糖无糖苏打水。Morbi tincidunt mattis前欧盟分子。悬挂式权杖是我最喜欢的。一只猫，一只猫，一只猫，一只猫。Etiam eget hendrerit neque，vitae ornare nisi。这是一种新的生活方式，一种新的生活方式。维利特之争，欧盟之争，温和的普尔文纳自由。当我们面对最终的挑战时，坐在艾米特·拉奥里特·普鲁斯·尤里西斯的位子上。
你好
名称
职业
毛里斯·欧波提托·多洛。无糖无糖苏打水。Morbi tincidunt mattis前欧盟分子。悬挂式权杖是我最喜欢的。一只猫，一只猫，一只猫，一只猫。Etiam eget hendrerit neque，vitae ornare nisi。这是一种新的生活方式，一种新的生活方式。维利特之争，欧盟之争，温和的普尔文纳自由。当我们面对最终的挑战时，坐在艾米特·拉奥里特·普鲁斯·尤里西斯的位子上。
你好