css – twitter bootstrap box-sizing破坏了我的布局

前端之家收集整理的这篇文章主要介绍了css – twitter bootstrap box-sizing破坏了我的布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我在我的项目的一半实施bootstrap时,我的布局破碎,修正了一些css修改,我已经评论了这个
/**,*:before,*:after {
  -webkit-Box-sizing: border-Box;
     -moz-Box-sizing: border-Box;
          Box-sizing: border-Box;
}*/

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

解决方法

是的,不要这样做删除框大小: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;
}

以上将导致:

通过框尺寸:边框,填充的沟槽结构将不在列的宽度的计算中。

尝试了解Bootstrap的网格和框尺寸:边框,并弄清楚为什么会破坏您的布局。解决这个问题,或考虑不要使用Bootstrap来完成你的项目。

猜你在找的CSS相关文章