/bootstrap

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

Merged
merged 1 commit into from Aug 5, 2015
+2 −2

Labels

css

Milestone

  v3.3.6

Assignees

No one assigned

4 participants

@studyjan @cvrebert @mdo @eddiegroves
@studyjan
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
View full changes
less/mixins/grid.less
@@ -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
Bootstrap member
cvrebert added a note Jul 8, 2015

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

@studyjan
studyjan added a note Jul 8, 2015

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@cvrebert
Bootstrap member
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
Bootstrap member
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

1 check passed

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

v3.3.6 ship list #16644

@eddiegroves
eddiegroves commented Sep 18, 2015

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
Merged

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