twitter bootstrap box-sizing 毁了我的布局

Question

当我在项目的中途实施引导程序时，我的布局被破坏了，通过一些 css 修改修复了这个问题，我已经注释掉了这个

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

在 bootstrap.css 中，这会影响它的核心吗？我只是想在我的项目中使用网格系统..

Answer 1

我使用了上述解决方案的组合来满足我的需要 （我只用了网格系统，其他的都已经有了）

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


[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="row"],
[class^="row"] * {
  box-sizing:border-box;
}

网格占用了过多的边距和内边距 所以我替换了所有的

padding-right:15px;
padding-left:15px;
margin-left=-15px;
margin-right=-15px;

to（我注释掉了边距）

.row {
/*  margin-left: -15px;
margin-right: -15px;*/
}

和

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

Answer 2

在你的 mixin 或变量中添加这个，并确保它在scaffolding.less 之后加载 它重置 bs3 box-sizing 并将其再次应用于特定元素和所有 BS3 所需元素。 我发现默认的 BS3 盒子大小造成的大部分混乱是在将其应用于

a,ul,li

魔法

* {
  .box-sizing(content-box);
}
form,
div,
img,
table,
th,
tr,
td,
p,
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary,
audio,
canvas,
progress,
video,
[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="form-"],
[class^="form-"] *,
[class^="bg-"],
[class^="bg-"] *,
[class^="navbar"],
[class^="navbar"] *,
[class^="nav"],
[class^="nav"] *,
[class^="row"],
[class^="row"] * {
  .box-sizing(border-box);
}

Answer 3

我有同样的问题，bootstrap 3 破坏了我现有的布局和第三方小部件。以下是我为了增加难度和稳定性而尝试过的一些事情。

最简单的方法

只有在不使用其他引导组件时才安全

在加载引导 css 后添加以下 css：

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

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

这将仅对网格系统中的元素使用border-box 大小。如果您在网格中有自定义小部件，这将不起作用，因为它们仍会应用 border-box。

更有针对性的方法

只有在不使用其他引导组件时才安全

或者，您可以将自定义 col 类添加到已经应用 col-*-* 的每个列 div，如下所示：

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

然后改用下面的css：

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

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

如果您只需要在项目中使用引导网格系统，则此方法可以正常工作。但是，如果您打算使用其他引导组件，我也不推荐这种方法，因为其他引导组件将取决于设置的 border-box。

Cherry-pick 每个包含要修复的元素

更好的方法是在一个特定的父元素上将 box-sizing 覆盖为 content-box，如下所示：

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

这种方法提供了与未来引导组件的最佳前向兼容性，即使它现在似乎对您有用。

Answer 4

是的，不要那样做。删除box-sizing: border-box 会破坏你的网格。另见：Why did Bootstrap 3 switch to box-sizing: border-box?

一个展示发生了什么的例子：

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

与：

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
} 

以上将导致：

使用box-sizing: border-box，通过填充的装订线构造将超出列宽的计算范围。

尝试了解 Bootstrap 的网格和 box-sizing: border-box 并弄清楚为什么这会破坏您的布局。修复此问题或考虑在您的项目中完全不使用 Bootstrap。