使用网格材质 UI 时出现响应式设计问题？答案

【问题标题】：Responsive Design Problem while using Grid Material UI?使用网格材质 UI 时出现响应式设计问题？
【发布时间】：2019-03-08 11:09:14
【问题描述】：

我在 React JS 项目中使用 Grid 组件时遇到了一点问题，我将从编写一些代码开始，然后解释我想要使用图像实现的目标：

假设这是渲染的代码：

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： css reactjs responsive-design material-ui

【解决方案1】：

取决于您希望它从 6 变为 12 的大小，但这就像将正确的 prop 值放入其中一样简单：

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

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

【讨论】：