在Twitter Bootstrap中处理容器中填充的最简单最合理的方法

Question

我经常构建网站,其容器就像在不同颜色的背景上的白页一样,网站的内容位于该白页内,并带有一点填充,使其不会碰到两侧.

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

我开始进入每个媒体查询并做一些数学运算,以确定需要从每个跨度和每个偏移量中减去多少像素,以便页面在任何给定的分辨率下正确显示但是我停下来思考,必须是一个更好的方式!

我并不反对做必要的工作,但是当我看到自己在许多(如果不是全部)结核病项目中遇到这个问题时,我想我觉得我正在以最合乎逻辑且最容易重复的方式接近这个过程.

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

我非常感谢你的想法!谢谢.

Answer 1

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

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