css - 使用 Grid Material UI 时出现响应式设计问题？

Question

我在 React JS 元素中使用网格组件时遇到了一些小问题，我将从编写一些代码开始，然后解释我想使用图像实现的目标:

假设这是呈现的代码:

 <div style="margin:100px 20%; width:80%" >
     <Grid container>
         <Grid item xs={6}>
             <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
             >
         </Grid>
         <Grid item xs={6}>
            <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
            >
         </Grid>
     </Grid>
 </div>

这就是它的样子(红色的我的网格和黑色的大 div):

当我调整窗口大小时使其变小时，它看起来是这样的:

我知道我的适当的元素有问题，这很容易，因为我制作了它的 CSS，但我现在不知道如何控制 Grids 属性，因为我希望 xs 在某个位置从 6 变为 12。

怎么做？如果不可能，是否有更好的解决方案？

如有任何帮助，我们将不胜感激。

Answer 1

取决于您希望它从 6 变为 12 的大小，但它就像将正确的 prop 值放入:

<Grid item xs={12} sm={6}>

请务必在此处阅读完整用例:https://material-ui.com/layout/grid/