Question

我正在使用材质ui Grid组件创建响应式网格布局。我想根据屏幕尺寸在网格内对齐内容-xs左对齐，md右对齐。我该怎么办？

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

一些示例代码。

public AzureMetricRecords getVmMetrics(String azureSubscriptionId, String workspace, String vm, String metric, AggregationType aggregationType) {
    Azure azure = getAzure(azureSubscriptionId);

    String vmId = "/subscriptions/" + azureSubscriptionId + "/resourceGroups/" + workspace + "-" + vm +
            "/providers/Microsoft.Compute/virtualMachines/" + vm;

    VirtualMachine azureVm = azure.virtualMachines().getByResourceGroup(workspace + "-" + vm, vm);
    if (azureVm != null) {
        Map<String,MetricDefinition> metricsIndex = new HashMap<>();
        List<MetricDefinition> definitions = azure.metricDefinitions().listByResource(vmId);
        for (MetricDefinition d : definitions) {
            metricsIndex.put(d.name().value(), d);
        }

        if (!metricsIndex.containsKey(metric)) {
            throw new ValidationException("metric not found");
        }

        return getMetrics(DateTime.now(), metricsIndex.get(metric), aggregationType);
    } else {
        LOGGER.warn("getVmMetrics: Vm NOT found");

        AzureMetricRecords metricRecords = new AzureMetricRecords();
        metricRecords.setMetric(metric);
        metricRecords.setAggregation(aggregationType.name());
        return metricRecords;
    }
}

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

Answer 1

不确定您是否最终解决了这个问题？无论如何我都会回答，以防其他人遇到类似的问题：

然后您可以使用材料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/

如何在材质ui网格中针对xs和md不同地对齐内容

1 个答案: