Ulises Colen Ulises Colen - 5 months ago 38
CSS Question

twitter bootstrap box-sizing ruined my layout

my layout broken when I implement bootstrap during the half way of my project, fixed that with some css modification, and I had commented out this

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


in bootstrap.css, will that affect its core? I just want to use the grid system in my project..

Answer

Yes, don't do that. Removing the box-sizing: border-box will ruin your grid. See also: Why did Bootstrap 3 switch to box-sizing: border-box?

An example to show what happens:

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

With:

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

The above will result in:

enter image description here

With box-sizing: border-box the gutter construct by padding will be out of the calculating of your column's width.

Try to understand Bootstrap's grid and the box-sizing: border-box and figure out why this will ruin your layout. Fix this problems or consider to don't use Bootstrap at all for your project.