我有一个正在构建的ReactJSMaterialUI webapp。我想在页面的左右两边添加空间(看起来像其他页面,包括堆栈溢出)。我不知道最好的做法是添加padding,还是margin。那么在手机上,我就不想要这个空间了。
我的一个想法是在左右两边添加空白的网格部分,并在移动端不出现断点的地方添加断点。我不知道这里什么才算是最好的方法。
你可以使用 max-width: 1200px
和 margin: 0px auth;
元素上,它包裹了整个页面来实现这一目的。
该 margin: 0px auto
会在顶部和底部添加0px的边距,并将左右边距居中。
<div className="page_wrpr">
.......
</div>
.page_wrpr {
max-width: 1200px;
margin:0px auto;
}
.container{ width: 900px; margin: 0 auto; }
该margin将给你的容器提供0的上下边距,在你用完900px后,无论还剩下多少水平空间的自动值,都将被平均分割,以增加主体两边的whitespace。