在我给出任何边距或填充后网格分崩离析

Question

我正在使用 bootstrap-网格系统和 Material UI，一切都很好，只是一个问题，事实上网格系统在 space 之后没有保留它的插槽任何填充或边距，而不是项目在没有足够的情况下转到下一行或下一行 space
Here is an example
正如您在示例中看到的，每个按钮的网格大小为 3，这意味着每行应该有 4 个按钮，但是由于只有一点点填充和边距，现在每行有 3 个按钮。
我期望的是，当应用边距和填充而不是转到下一行或下一行时，项目的宽度会自动变小，我怎样才能实现这样的事情？
谢谢

Answer 1

不要在按钮上使用 bootstrap 列 - 类。像这样将按钮包裹在 div 中：

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

现在你只需要改变按钮的样式（删除/修改这个）：

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

如果需要，可以为按钮添加填充/边距。永远不要像 .row 或 .col-*

添加填充/边距到类

Answer 2

你可以把它包装成Div

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <Div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button}
      >
        Default
      </Button></Div>
    );
  }

使用前需要导入 Div。

import Div from "@material-ui/core/Grid";

https://codesandbox.io/s/bootstrap-grid-testcase-efi4u

在我给出任何边距或填充后网格分崩离析

Grid falls apart after i give any margin or padding

css

reactjs

material-ui

bootstrap-grid