如何使用material-ui的网格系统将5个项目均匀地组织成一行？

Question

网格系统是12个，如何均匀地将5个项目排成一行？2.4 不起作用...提前致谢:)

我的代码：

    <Grid container spacing={10}>
        {data.map(item => (
          <Grid item xs={12} md={2.4}>
            <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
              {item}
            </div>
          </Grid>
        ))}
      </Grid>

Answer 1

<Grid lg={12/5}></Grid.如果您想在一行中显示 5 个元素，您可以尝试添加此案例

Answer 2

有关如何执行此操作的示例，请参阅文档中的自动布局部分。

对于您的代码，我相信以下内容应该有效：

<Grid container spacing={10}>
  {data.map(item => (
    <Grid item xs={12} md>  // should also add a "key" prop here
      <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
        {item}
      </div>
    </Grid>
  ))}
</Grid>