牌上有边距-对
牌上有边距-对
提问于 2018-10-08 10:44:20
我试着在一个格子里显示三张卡片。卡的媒体最大宽度为345 of，但由于这个原因，卡片获得了很大的空白。在网格中造型看起来不太好。有谁知道我怎么才能摆脱保证金吗？
我有一个用沙箱制作的例子：https://codesandbox.io/s/6451nx4ypr
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-10-08 10:54:52
问题在于电网。卡片有最大的大小，但是网格更大。这留下了一些额外的空间。如果在调试器中查看，则没有可更改的范围。
您可以尝试以下方法：
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"
}
};Stack Overflow用户
发布于 2018-10-08 10:55:40
我不知道它的反应是否不同，但在角度上，我只是将类应用于任何我需要重新设计的类，它似乎需要。
如果将对象放在另一种容器中，请确保它不应用某些空白/空间(比如一个flex容器或其他什么)。将某些东西应用到容器项目中，以去掉其中的任何一项。
简单的例子是，这去掉了所有的填充和边距，并对背景产生了可预测的效果(我刚刚在一个项目中尝试过，它的工作效果与预期一样)：
mat-card {
margin: 0;
padding: 0px;
background-color: grey;
}
mat-card-content {
margin: 0;
padding: 0px;
background-color: red;
}Stack Overflow用户
发布于 2018-10-08 11:05:49
如果您熟悉引导，就会有一个叫做网格偏移的特性。不幸的是，这仍然不是一个材料-ui的特性。
所以，你能做的就是移除你卡上的最大宽度。然后向两侧添加一个空网格以创建偏移量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52700561
复制相关文章
相似问题
腾讯云开发者
