Question

我经常建立一个网站，其容器就像一个白色页面在不同颜色的背景上，并且网站的内容位于该白页内，并带有一点填充，以便它不会碰到两侧。

使用响应式网格时，这非常具有挑战性。如果我将50px的填充添加到容器中，在某些分辨率下工作完美，但在其他尺寸下，页面对于屏幕来说太大了，这显然与bootstrap的CSS中为某些媒体查询定义的宽度有关。

我开始进入每个媒体查询并进行一些数学计算，确切地知道需要从每个跨度和每个偏移量中减去多少像素，以便页面在任何给定的分辨率下正确显示但是后来我停下来思考，必须有更好的方法！

我并不反对做必要的工作但是当我看到自己在很多（如果不是全部）结核病项目中遇到这个问题时，我想我觉得我正在以最合乎逻辑的方式接近这个过程 - 可重复的方式。

您是否会手动更改每个跨度和偏移的像素大小？或许还有另一种更明智的方法来接近填充的容器？

我非常感谢你的想法！感谢。

Answer 1

您可以将box-sizing设置为border-box。问题是12个跨度的大于容器的大小。您可以使用 .row-fluid 来解决这个问题，这会使网格相对。

.container { box-sizing: border-box; padding: 50px; }