4

我正在使用材质 ui Grid 组件来创建响应式网格布局。我想根据屏幕大小对齐网格内的内容 - 左对齐 xs 右对齐 md。我怎么做？

我使用 xs 和 md 断点根据屏幕大小划分网格。使用的材料-ui-grid文档。该文档还提到了一个名为 align-items-xs-flex-start 的属性。所以我给了 align-items-xs-flex-start 和 align-items-md-flex-end 作为 Grid 组件的道具，以查看内容是否在 xs 中与 md 中的左对齐和右对齐。但它没有用。

一些示例代码。

<Grid>
  <Grid xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

在中等大小的屏幕上，我希望 John Doe 正确对齐。在一个小屏幕上，我希望 John Doe 来到下一行并左对齐。当我尝试使用 align-items-xs-flex-start 和 align-items-md-flex-end 时，在这两种情况下它仍然左对齐。

4

1 回答 1

0

不知道你最终是否解决了这个问题？无论如何我都会回答，以防其他人有类似的问题：

然后，您可以使用Material UI 断点为不同的尺寸设置不同的样式。例如，对于您的文本对齐示例，您需要这样的内容：

    [theme.breakpoints.down('sm')]: {
      textAlign: left,
    },
    [theme.breakpoints.up('md')]: {
      textAlign: center,
    }

此外，如果有人对您的示例感到困惑，他们应该知道 Grid 元素应该具有正确显示的container和属性：item

<Grid container>
  <Grid item className="grid-el" xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid item className="grid-el" xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

有关断点的更多信息：https ://material-ui.com/customization/breakpoints/

于 2019-10-29T21:29:44.293 回答