Question

我有一个带有网格的布局HOC。在内部，我有4个带有网格项的Widget组件。我希望这些组件以以下方式显示：

大屏幕：1行共4张
中型屏幕：连续2列2列
小屏幕：1个小部件占据全宽，4行

所以我这样配置它：

sub CellAequalCellB ()
    Dim ws As Worksheet, rng As Range
    Dim lastRow As Long, i as long

    with ThisWorkbook.Sheets("Sheet1")

        lastRow = .Range("A" & .Rows.Count).End(xlUp).Row

        for i=lastrow to 1 step -1
            if .cells(i, "H") = .cells(i, "I") then _
                .rows(i).EntireRow.Delete
        next i

    end with

End Sub

但是，当我调整屏幕大小时，它会直接从4变为1。

我试图在index.js中重新配置主题：

<Grid item xs={12} sm={2} md={3}>
  ...content
</Grid>

我还能做什么？我该如何运作？

Answer 1

您有sm={2}，这意味着每一行都被分为6列（您的窗口小部件现在在sm屏幕上覆盖了4/6列）

在md => sm之间过渡时，您的小部件的大小可能会变得更小，但是您没有注意到它，然后它跳回了1

您需要具有sm={6}才能每行拥有2个小部件，而不必自定义主题断点

如何在React的Material UI中的网格项上设置多个断点？

1 个答案: