css - 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

我有同样的问题，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 每个包含要修复的元素

一个更好的方法是content-box像这样的小部件的特定父元素覆盖 box-sizing ：

.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 2

是的，不要那样做。删除box-sizing: border-box将破坏您的网格。另请参阅：为什么 Bootstrap 3 切换到 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。

Answer 3

将此添加到您的 mixin 或变量中，并确保它在脚手架之后加载。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 4

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

/* *,
*: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;
}