使用 box-sizing : border-box 和 Twitter Bootstrap 2.x，我们可以在不破坏所有内容的情况下轻松完成吗？

Question

我在上一个项目中一直使用“边框框模型”。这有很多优点，我不会在这里解释。但你可以在这里阅读：Border-box in css-tricks

现在我开始了一个更大的项目，我们认为 twitter 引导程序将是满足我们需求的一个很好的解决方案。我想知道是否可以在不破坏所有内容的情况下使其“边框化”。有没有人试过这个，后果是什么/会是什么？调整太多？真正的进步？

谢谢

Answer 1

是的。

这是一个可以在 Bootstrap 中使用的 mixin。它将自动添加所有供应商前缀。

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

输入仍然需要内容框，否则它们会太小。

Answer 2

它极大地简化了流体/响应式设计的工作：有些复杂的布局和情况需要一致的间距，如果不使用border-box，这几乎是不可能的。

我最近用过这个（FTW!）：

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

在一个比较大的网站上，发现确实解决了很多问题。如果您需要对 IE7 的支持，我的方法是为该浏览器提供网站的固定宽度版本，并仅在需要时使用 this polyfill。*

我真的没有发现任何缺点 - 能够指定两个 50% 宽度的列，添加 padding 并知道它会起作用，这让我松了一口气。在您可能依赖标准 box-model 的地方，您始终可以针对特定元素恢复使用它。

引导程序特定

关于具体使用 Bootstrap，您可能会遇到一些问题 - 我建议您对其进行测试。有趣的是，将上述 CSS 添加到 Bootstrap homepage 中没有任何问题。

Bootstrap 2.x 中内置的主网格系统使用float 和margin，因此更改box-model 不会对此产生影响（它只会让您能够将padding 直接添加到列中)。

Bootstrap 3 正在转向移动优先的方法（并完全放弃对 IE7 的支持）。其中包括：

[A] 新的单一网格系统（仍然使用 .row）使用百分比宽度、填充和 box-sizing: border-box，而不是像素宽度和边距。

因此，他们显然相信采用这种方法的好处。

* 我的想法是我已经依赖 Modernizr 中的 HTML shim，因此浏览器的布局已经依赖 JS。使用 SASS 将宽度存储为变量，这非常顺利。也就是说，如果任何特定项目对旧 IE 的使用率较高，那么这种方法就不太合适了。