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

Question

格子系统是12，怎样才能把5个item均匀的放一排？ 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

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

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

<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>