twitter-bootstrap - 在 Twitter Bootstrap 中处理容器中的填充的最简单、最明智的方法

Question

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

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

我开始研究每个媒体查询并进行一些数学计算，以准确计算出需要从每个跨度和每个偏移量中减去多少像素，以便页面在任何给定分辨率下正确显示，但后来我停下来思考，一定有更好的办法!

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

您会手动更改每个跨度和偏移量的像素大小吗？或者也许还有另一种更明智的方法来处理带衬垫的容器？

我非常感谢您的想法!谢谢。

Answer 1

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

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

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem