卡附带保证金权利

Question

我正在尝试在网格中显示三张卡片。卡的媒体最大宽度为345px，因此，卡的页边距很多。样式在网格中看起来不太好。有谁知道我该如何摆脱利润？

我有一个在沙箱中制作的示例：https://codesandbox.io/s/6451nx4ypr

Answer 1

问题出在网格上。该卡具有最大大小，但网格较大。这留下了一些额外的空间。如果您在调试器中查看，则没有余量可以更改。

您可以尝试以下操作：

const styles = {
  card: {
    maxWidth: 345
  },
  gridFour: {
    maxWidth: 345
  },
  media: {
    // ⚠️ object-fit is not supported by IE11.
    objectFit: "cover",
  }
};

然后将网格类更改为：

<Grid item sm={4} className={classes.gridFour}>

沙箱：https://codesandbox.io/embed/k3k2m35mz5

您还可以将卡片放在Grid的中央：

const styles = {
  card: {
    maxWidth: 345,
    margin: 'auto'
  },
  gridFour: {
    align: 'center'
  },
  media: {
    // ⚠️ object-fit is not supported by IE11.
    objectFit: "cover"
  }
};

Answer 2

我不知道它在React中是否有不同的工作方式，但是在Angular中，我只是将类应用于需要重新样式设置的任何东西，这似乎很必要。

如果对象在某种其他容器中，请确保其未应用某些边距/空间（例如flex容器等）。在容器上涂一些东西以除去其中的任何东西。

简单的示例，它去除了所有填充和边距，并对背景具有可预测的效果（我刚刚在项目中尝试过，它可以按预期工作）：

mat-card {
  margin: 0;
  padding: 0px;
  background-color: grey;
}

mat-card-content {
  margin: 0;
  padding: 0px;
  background-color: red;
}

Answer 3

如果您熟悉引导程序，则此功能称为网格偏移。不幸的是，这仍然不是material-ui的功能。

因此，您可以做的是删除卡上的最大宽度。然后在侧面添加一个空网格以创建偏移量。

Answer 4

如果您希望定义宽度，并且当屏幕宽度增加时应该在屏幕上流动，如this codepen链接中所示。 而且默认宽度为4，并且没有自定义样式将宽度定义为响应宽度。