Incorrect `margin-left` and `margin-right` on `.row`-class when using odd `@grid-gutter-width`
Created by: malthejorgensen
Steps to reproduce
- Choose an odd
@grid-gutter-width
, e.g.@grid-gutter-width: 15px
- Compile bootstrap Less-stylesheets
Problem
The left and right margin .row
class, which should normally "cancel out" the left and right padding of the .col-*-*
classes is actually flipped so that instead cancelling out, there's a one pixel difference between the two:
.row {
margin-left: -7px; /* should be -8px */
margin-right: -8px; /* should be -7px */
}
.col-md-12 {
padding-left: 8px;
padding-right: 7px;
}
Reason
The reason why this happens is that in .row
the ceil()
and floor()
-functions are used on negative numbers: margin-left: ceil(-7.5px) == -7px
, as opposed to the .col-*-*
-classes where it's used in a standard way on positive numbers: padding-left: ceil(7.5px) == 8px
, which ends up giving the one pixel difference. As ceil()
/floor()
rounds towards negative/positive infinity, rather than towards/away from zero.
The bug was introduced with the fix for: https://github.com/twbs/bootstrap/issues/16281