twitter bootstrap box-sizing毁了我的布局

Question

当我在项目的一半时间实现bootstrap时我的布局坏了,修复了一些css修改,我已经注释掉了

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

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

Answer 1

我有同样的问题,bootstrap 3破坏了我现有的布局和第三方小部件.这是我为了增加难度和稳定性而尝试过的东西.

最简单的方法

仅当您不使用其他引导程序组件时才安全

加载bootstrap 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在这个小部件的特定父元素上一样:

.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切换到大小调整框:边框？

举例说明会发生什么:

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