10

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

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

谢谢

4

2 回答 2

16

是的。

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

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

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

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

于 2013-03-19T09:24:58.193 回答
7

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

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

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

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

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

引导程序特定

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

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

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

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

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

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

于 2013-03-14T10:11:37.037 回答