Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.row causes horizontal overflow #8959

Closed
hice3000 opened this issue Aug 1, 2013 · 22 comments
Closed

.row causes horizontal overflow #8959

hice3000 opened this issue Aug 1, 2013 · 22 comments
Labels
confirmed css

Comments

@hice3000
Copy link

hice3000 commented Aug 1, 2013

My (empty) row always causes a horizontal scrollbar to appear (~10px), and I don't think just hiding it is the best solution. Here's my code:

<div class="row">
    <div class="col-lg-12">
    </div>
</div>

Note: The column is in my code empty, too.

Thank for your help, hice3000.
@Joyrex
Copy link

Joyrex commented Aug 1, 2013

#8966 appears to be a repeat of this issue.

@hice3000
Copy link
Author

hice3000 commented Aug 1, 2013

@Joyrex Oh damn, I didn't searched if there is already such a issue.

@hice3000 hice3000 closed this as completed Aug 1, 2013
@Joyrex
Copy link

Joyrex commented Aug 1, 2013

No, you're good - your issue came BEFORE 8966 - I was referring to it since 8966 didn't bother searching before posting!

@cvrebert cvrebert mentioned this issue Aug 1, 2013
Closed
@cvrebert cvrebert reopened this Aug 1, 2013
@jasonsperske
Copy link
Contributor

this is caused by the following lines from mixins.less:

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

Which produces the following CSS

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

@hice3000
Copy link
Author

hice3000 commented Aug 1, 2013

Could sombody fix this and submit a pull request?

@designbydarren
Copy link

I'm also experiencing this issue (on iPad/iPhone). Moving from portrait to landscape then back to portrait. Horizontal scrollbars appear and a gutter down the right hand side (the same colour as the body colour).

Link : http://bit.ly/13xmgEg

@mdo mdo closed this as completed in d1e712d Aug 7, 2013
@pavarnos
Copy link

RC2 fixed this. Its broken again in the 3.0.0 release

<body>
<div class="row">
    <div class="col-lg-12">
        <p>Hello world</p>
    </div>
</div>
</body>

@MattKetmo
Copy link

I confirm that this fix in RC2 have been reversed in e4bb388. In the same commit, padding was added to body:

padding-left:  (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);

...but then has been removed in 3.0.0 release.

@cvrebert cvrebert reopened this Aug 20, 2013
@cvrebert cvrebert mentioned this issue Aug 20, 2013
Closed
@mdo
Copy link
Member

mdo commented Aug 20, 2013

So the updated solution between RC2 and final was adding padding to the container. Add that, or another containing element with padding—and you're set.

@pavarnos
Copy link

Thanks for the quick reply (and thanks so much for Bootstrap. Very awesome!).
This is likely to be an FAQ. Any chance of adding a note / example in the docs? Sorry if you already have it: i looked but could not find it.

@Joyrex
Copy link

Joyrex commented Aug 21, 2013

Basically the structure of any content now needs to be:

`

`

The pros are you don't add any manual styles, the cons are you now have another nested element to deal with.

@hice3000
Copy link
Author

@Joyrex As I experienced, you can put the .container and .row classes together, so no extra nesting is needed. Or is this not recommended?

@Joyrex
Copy link

Joyrex commented Aug 21, 2013

Hmmm. I dunno - back in Bootstrap 2.x, I would have said sure, go ahead and do that, but with BS3, I've found myself having to move combined classes into their own separate elements in order to get consistent results (the .well class comes to mind, where I could add .well to a FORM element, and it would style correctly, but now I've had to put .well in a separate containing/wrapping DIV.

Can we have some input from the Bootstrap Pros on what's considered "best practice"?

@joekaiser
Copy link

so .row HAS to be paired with .container now? what about full width grids?

@jhanzair
Copy link

I'm finding that using .row and .container as combined classes shifts the centering of the items you put inside to the left. This does not happen when using them in different classes.

@daniduarte
Copy link

I used the ancient .row-fluid to fix it temporaly, till someone repair it 👍

@cvrebert
Copy link
Collaborator

Full width grid problems is #9998.

@redranger
Copy link

This issue is still a problem, will Bootstrap be fixing it?

@cvrebert
Copy link
Collaborator

cvrebert commented Oct 3, 2013

Current successor issue is #10711.

@matsilva
Copy link

I threw this into a separate .less file and included it.

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

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

Now I can create this without overflow:

<div class="row"> <!--No negative margin, no overflow-->
    <div class="container">
        <div class="row"><!--Compensates with negative margin-->
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
        <div class="row"> <!--Compensates with negative margin-->
            <div class="col-sm-3"> 
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
    </div>
</div>

@cvrebert
Copy link
Collaborator

See http://getbootstrap.com/css/#grid and 6273604.

@VidalQuevedo
Copy link

@cvrebert is right: see http://getbootstrap.com/css/#grid and 6273604, which introduced the .container-fluid class. Based on that commit, to solve the horizontal scroll problem caused by .row negative margins in page-wide layouts, you need to wrap your .row elements with a .container-fluid element. For example:

<!--- Instead of this... -->
<body>
  <div class="row">
    <div class="col-sm-6">my column</div>
    <div class="col-sm-6">my other column</div>
  </div>
</div>

<!--- ...do this: -->
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">my column</div>
      <div class="col-sm-6">my other column</div>
    </div>
  </div>
</body>

Hope that helps!

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo
(less) fixes twbs#8959: only negative indent rows within .container (…
6c39627 
…prevents horizontal scroll on full-width pages)
@twbs twbs locked and limited conversation to collaborators Jun 14, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo
(less) fixes twbs#8959: only negative indent rows within .container (…
0ad4de3 
…prevents horizontal scroll on full-width pages)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
confirmed css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests