Round paddings of .container & .container-fluid to match .row's margins #16785

merged 1 commit into from Aug 5, 2015


None yet

4 participants

studyjan commented Jul 8, 2015

When i use @grid-gutter-width: 15px; .container-fixed will generate:

.container {
    padding-left:  7.5px;
    padding-right: 7.5px;
.container-fluid {
    padding-left:  7.5px;
    padding-right: 7.5px;

but .row has bad negative margin:

.row {
    margin-left: -7px;
    margin-right: -8px;
@cvrebert cvrebert added the css label Jul 8, 2015
@cvrebert cvrebert commented on the diff Jul 8, 2015
@@ -6,8 +6,8 @@
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
- padding-left: (@gutter / 2);
- padding-right: (@gutter / 2);
+ padding-left: floor((@gutter / 2));
cvrebert Jul 8, 2015 Member

Why does left use floor when .make-row uses ceil for left on line 16?

studyjan Jul 8, 2015 Contributor

Because .mak-row has a negative margin. Therefore rounding must be reversed.

margin-left: ceil((15px / -2)); => margin-left: -7px
padding-left: floor((15px / 2)); => padding-left: 7px

Sorry for my bad english. :)

cvrebert commented Jul 8, 2015

X-Ref: #16351

@cvrebert cvrebert changed the title from Debug .container and .container-fluid to Round paddings of .container & .container-fluid to match .row's margins Jul 8, 2015
mdo commented Aug 5, 2015

We should merge this to match, yeah, but as an FYI, in v4 we won't have this at all.

@mdo mdo added this to the v3.3.6 milestone Aug 5, 2015
@mdo mdo merged commit bc41570 into twbs:master Aug 5, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
@mdo mdo referenced this pull request Aug 5, 2015

v3.3.6 ship list #16644


I'm confused by the rounding - we use a 15px gutter width and now I'm seeing 7px on the left and 8px on the right. Content is now off center - which is just noticeable on small screens.

The 7.5px was working fine previously before we pulled in v8.3.5

@kkirsche kkirsche referenced this pull request in elastic/kibana Feb 21, 2016

Update Bootstrap to 3.3.6 #6294

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment