使用box-sizing：border-box with Twitter Bootstrap 2.x，我们可以轻松地做而不破坏一切吗？ [英] Using box-sizing : border-box with Twitter Bootstrap 2.x, can we do it easily without breaking everything?

问题描述

我在上次的项目中使用了边框盒模型。这有很多优点，我不会在这里解释。但您可以在这里阅读： css-tricks中的边框

现在我开始一个更大的项目，我们决定twitter bootstrap将是一个很好的解决方案，我们的需要。我想知道是否有可能使它边框盒而不破坏一切。有没有人试过这个和什么是/将是后果？调整太多？真正的改进？

谢谢

解决方案

>

以下是您可以在Bootstrap中使用的 mixin 。

  *，*：before，*：after {
 .box-边框（边框）; 
} 
 
输入{
 .box-sizing（content-box）; 
} 
  

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

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

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?

Thank you

解决方案

Yes.

Here's a mixin you can use in Bootstrap. It will automatically add all the vendor prefixes.

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

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

Inputs still need the content-box, otherwise they'll be too small.

这篇关于使用box-sizing：border-box with Twitter Bootstrap 2.x，我们可以轻松地做而不破坏一切吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！