twitter-bootstrap 将 box-sizing : border-box 与 Twitter Bootstrap 2.x 结合使用，我们可以轻松做到而不破坏一切吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15405837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?
提问by Kev
I have been using the "border-box box model" in my last projects. This has a lot of advantages that I won't explain here. But you can read about it here: Border-box in css-tricks
我在上一个项目中一直使用“边框框模型”。这有很多优点，我不会在这里解释。但是你可以在这里阅读它：css-tricks 中的边框
Now I'm starting a bigger project and we have decided that twitter bootstrap would be a good solution for our needs. I was wondering if it's possible to make it "border-boxed" without breaking everything. Has anybody tried this and what are/would be the consequences? Too many adjustments? real improvement?
现在我开始了一个更大的项目，我们已经决定 twitter bootstrap 将是满足我们需求的一个很好的解决方案。我想知道是否有可能在不破坏所有内容的情况下使其“边框装箱”。有没有人试过这个，后果是/会是什么？调整太多？真正的改善？
Thank you
谢谢
回答by Jonatan Littke
Yes.
是的。
Here's a mixinyou can use in Bootstrap. It will automatically add all the vendor prefixes.
这是您可以在 Bootstrap 中使用的mixin。它将自动添加所有供应商前缀。
*, *:before, *:after {
.box-sizing(border-box);
}
input {
.box-sizing(content-box);
}
Inputs still need the content-box, otherwise they'll be too small.
输入仍然需要内容框，否则它们会太小。
回答by CherryFlavourPez
It hugely simplifies working with fluid/responsive designs: there are some complex layouts and cases where consistent spacing is required that would be nigh on impossible without using border-box.
它极大地简化了使用流体/响应式设计的工作：有一些复杂的布局和需要一致间距的情况，如果不使用border-box.
I've recently used this (FTW!):
我最近使用了这个（FTW！）：
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
on a fairly large site, and found it has indeed solved a lot of issues. If you require support for IE7, my approach was to serve that browser a fixed-width version of the site, and use this polyfillonly where needed.*
在一个相当大的网站上，发现它确实解决了很多问题。如果您需要支持 IE7，我的方法是为该浏览器提供固定宽度版本的网站，并仅在需要时使用此 polyfill。*
I really haven't found any drawbacks - it's a relief to be able to specify two columns of 50% width, add paddingand know that it will just work. In places where you might rely on the standard box-model, you can always revert back to it for specific elements.
我真的没有发现任何缺点 - 能够指定 50% 宽度的两列，添加padding并知道它会起作用，这是一种解脱。在可能依赖标准的地方，box-model对于特定元素，您始终可以恢复到标准。
Bootstrap-specific
Bootstrap 特有的
Regarding using Bootstrap specifically, you might run into some issues - I would suggest testing it out. Anecdotally, adding the above CSS into the Bootstrap homepageshowed no problems.
关于专门使用 Bootstrap，您可能会遇到一些问题 - 我建议对其进行测试。有趣的是，将上述 CSS 添加到Bootstrap 主页显示没有问题。
The main grid system built into Bootstrap 2.x uses floatand margin, so changing the box-modelwill have no impact on that (it will just give you the ability to add paddingdirectly to columns).
Bootstrap 2.x 中内置的主网格系统使用floatand margin，因此更改box-model不会对此产生影响（它只会让您能够padding直接添加到列）。
Bootstrap 3is moving to a mobile-first approach (and completely dropping IE7 support). That includes:
Bootstrap 3正在转向移动优先的方法（并完全放弃对 IE7 的支持）。那包括：
[A] new single grid system (still uses.row) utilizes percentage widths, padding, andbox-sizing: border-boxinstead of pixel widths and margins.
So, they clearly believe in the benefits of taking this approach.
因此，他们显然相信采用这种方法的好处。
* My thinking was that I'm already relying on the HTML shim in Modernizr, so that browser is already reliant on JS for its layout. With SASS to store widths as variables this has worked pretty smoothly. That said, if usage for old IE is higher for any particular project, this approach becomes less appropriate.
* 我的想法是我已经依赖 Modernizr 中的 HTML shim，因此浏览器已经依赖 JS 进行布局。使用 SASS 将宽度存储为变量，这工作得非常顺利。也就是说，如果任何特定项目对旧 IE 的使用率更高，则这种方法就不太合适了。
