使用box-sizing:与Twitter Bootstrap 2.x的边框,我们可以轻松地完成它而不会破坏一切吗？

Question

我在上一期项目中一直使用"边框盒模型".这有很多优点,我不会在这里解释.但你可以在这里阅读:css-tricks中的边框

现在我开始了一个更大的项目,我们已经确定twitter bootstrap将是一个很好的解决方案,满足我们的需求.我想知道是否可以在没有破坏一切的情况下使其成为"边境盒装".有没有人试过这个,后果是什么？调整太多了？真正的改善？

谢谢

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,我的方法是为该浏览器提供网站的固定宽度版本,并仅在需要时使用此polyfill.*

我真的没有发现任何缺点 - 能够指定两个50%宽度的列是一种解脱,添加padding并知道它将起作用.在您可能依赖标准的地方box-model,您可以随时恢复为特定元素.

引导专用

关于使用Bootstrap,你可能会遇到一些问题 - 我建议你测试一下.有趣的是,将上述CSS添加到Bootstrap主页中显示没有问题.

Bootstrap 2.x内置的主要网格系统使用float和margin,因此更改box-model意志对此没有影响(它只是让您能够padding直接添加到列).

Bootstrap 3正在转向移动优先方法(并完全放弃IE7支持).那包括:

[A]新的单网格系统(仍然使用.row)利用百分比宽度,填充,而box-sizing: border-box不是像素宽度和边距.

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

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