布局发布材料用户界面及反应
布局发布材料用户界面及反应
提问于 2022-10-25 10:28:56
我想得到一些反应和材料用户界面方面的帮助。
我的目标是在桌面上有3列，一个带有单选按钮和一个标签内联，在另外两个列中有一个带有一些选项值的选择菜单。
在Mobile上，我需要有两个列，里面有select菜单，输入需要放在2列上面，如下所示。第一张图片显示桌面布局(3列相同大小)，第二张图片显示移动布局(2列2行)。
目前，我得到了3列在我的布局，但我被困在移动版本。仍然学习反应和材料用户界面，我将感谢任何帮助。
<Grid display='flex>
<Grid lg={4}
<FormControlLabel value="my quantity" control={<Radio />} label="My Label" />
</Grid>
<Grid lg={4}>
<InputLabel htmlFor="uncontrolled-native" sx={{ display:'inline-block'}}>Text One</InputLabel>
<Select defaultValue={4} sx={{ backgroundColor:'lightgrey'}}>
<option value={1}>1</option>
</Select>
</Grid>
<Grid lg={4}>
<InputLabel htmlFor="uncontrolled-native" sx={{ display:'inline-block'}}>Text Two</InputLabel>
<Select>
<option value={1}>1</option>
</Select>
</Grid>
</Grid>谢谢，祝你今天愉快！
回答 1
Stack Overflow用户
发布于 2022-10-25 10:39:16
基本上，Grid共有12列，因此假设您希望1列有2个元素，那么您应该除以12/2，即每个元素6。下面是您的一个例子：
<Grid container spacing={2}>
<Grid item xs={12} lg={6}>
<Item>Your label (1)</Item>
</Grid>
<Grid item xs={12} lg={6}>
<Stack direction="row" spacing={2}>
<Item>Text 1</Item>
<Item>Text 2</Item>
</Stack>
</Grid>
</Grid>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74192632
复制相关文章
相似问题
腾讯云开发者
