Skip to content

Commit

Permalink
Make negative margins on rows the default, not just in containers, an…
Browse files Browse the repository at this point in the history 
…d add padding to body to compensate
  • Loading branch information
@mdo
mdo committed Aug 16, 2013
1 parent f459d76 commit e4bb388
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 39 deletions.
36 changes: 12 additions & 24 deletions dist/css/bootstrap.css
View file
Expand Up @@ -300,6 +300,8 @@ html {
}

body {
padding-right: 15px;
padding-left: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
Expand Down Expand Up @@ -757,6 +759,11 @@ pre code {
clear: both;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
Expand All @@ -777,18 +784,6 @@ pre code {
clear: both;
}

@media (min-width: 768px) {
.container .row {
margin-right: -15px;
margin-left: -15px;
}
}

.row .row {
margin-right: -15px;
margin-left: -15px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
Expand Down Expand Up @@ -1888,6 +1883,11 @@ textarea.input-lg {
padding-top: 6px;
}

.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}

.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
Expand All @@ -1908,18 +1908,6 @@ textarea.input-lg {
clear: both;
}

@media (min-width: 768px) {
.container .form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}

.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}

@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

16 changes: 2 additions & 14 deletions less/mixins.less
View file
Expand Up @@ -529,21 +529,9 @@

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.clearfix();

.container & {
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}

// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}

// Generate the extra small columns
Expand Down
2 changes: 2 additions & 0 deletions less/scaffolding.less
View file
Expand Up @@ -22,6 +22,8 @@ html {
}

body {
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
Expand Down

3 comments on commit e4bb388

@elithrar
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may be wrong, but this seemingly causes tablet sizes and below to suffer wide, blank margins on either side of the content when using a static navbar & static footer. Hard to show against GitHub's white background, but note that the black footer should (and was, before this commit) full-width. The navbar (not shown) is similarly affected.

broken margins

I can fix this with the below, but it seems a clunky solution.

body {
    padding: 0px 0px;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

If you want this moved into an issue, let me know and I'll do so.

@erikflowers
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a similar issue.

On my site, I use wrapper divs around the containers so that I have have colored sections that go side to side, so it looks like

<header>
    <div class="container">
        <div class="row">
            ...things...
        </div>
    </div>
</header>

In this case, the header could be a solid color, red, and then the container and such inside of it behaves normally. With this commit, the body has the 15px padding, so the content inside the .container acts the same, but my header that used to span the whole browser now hits the body padding.

This is mitigated by using

header {
   background-color: @red;
   padding: 0 15px;
   margin: 0 -15px;
}

Which returns it to the same state it was before the body had the padding. Like elithrar above, I am not sure if this is an issue, but for "wrappers" that don't have a width or margin set to them, they need that -15px side margins to touch the "edges" of the browser, and then some sort of inner padding to keep content from touching the edges as well, which it didn't need before since the rows had the margins to keep everything away from the edges.

You can see my development site I update each day with the new commits to see what happens, the neon green squares show the body padding pushing in the wrappers. The red and gray wrappers would touch the edges before. The negative margin fixes it, but I am not sure if that's how you want people using full width wrappers. If it's an issue, I can file it there as well.

margins

@elithrar
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like @mdo fixed this in cd0df1d — he removed the body padding and added it to the container.

I've removed my quick hacks—body { padding-left: 0; padding-right: 0; }—and it seems that full width containers function as they should now.

(thanks again @mdo for the quick fix!)

Please sign in to comment.