卡片带有margin-right答案

【问题标题】：Cards come with margin-right卡片带有margin-right
【发布时间】：2018-10-08 10:44:20
【问题描述】：

我试图在一个网格中显示三张卡片。卡片的媒体最大宽度为 345 像素，但正因为如此，卡片获得了很多边距。样式在网格中看起来不太好。有谁知道我怎样才能摆脱边缘？

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

【问题讨论】：

没有margin-right，卡片.ImgMediaCard-card-1 占用最大允许空间max-width: 345px;，卡片项目每个空间有33%的宽度。应该发生什么？你想让它们居中吗？
是的，只需将它们均匀地分布在网格中即可。因为右边现在有更多的空白。 @kunukn
您可以添加以下css：.ImgMediaCard-card-1{ margin: 0 auto; }
有点不清楚你想达到什么目的？网格将屏幕一分为四，如果你限制卡片的大小，你希望多余的空间会发生什么？

标签： javascript reactjs material-ui

【解决方案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"
  }
};

【讨论】：

【解决方案2】：

我不知道它在 React 中的工作方式是否有所不同，但在 Angular 中，我只是将类应用于我需要重新设置样式的任何内容，并且似乎需要。

如果您将对象放在其他某种容器中，请确保它不会应用一些边距/空间（例如 flex 容器或其他东西）。在容器物品上涂抹一些东西以去除其中的任何东西。

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

@PeterRosvelt，你有时间查看上面提到的 codepen 链接吗？