Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Incorrect `margin-left` and `margin-right` on `.row`-class when using odd `@grid-gutter-width`

Created by: malthejorgensen

Steps to reproduce

  1. Choose an odd @grid-gutter-width, e.g. @grid-gutter-width: 15px
  2. 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