Bootstrap .container > .row horizontal scroll issue

Question

I've already taken a look into these solutions (same problem):

But none , seem to work for me apart from the ugly hack of

body { overflow-x: hidden;}

I just downloaded the current bootstrap distribution from their website (v3.3.4).It also has this .container-fluidclass which is supposed to be the fix for this problem. However, I'm still having this issue and wanted to know if others have also faced this problem. I'm getting this issue in localhost ( using MAMP ). I haven't tried production server yet as I'm confused about why this problem still persists. I decided to post this question as the previous issues were raised a couple of years ago.

My code setup is an extremely basic one (I've used container class too) :

<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>

We need the code for your `column` class. It might be breaking things. Also, try [Bootlinting](https://github.com/twbs/bootlint) your page. — cvrebert, May 20 '15 at 06:25

score 0 · Answer 1 · edited Dec 17 '15 at 10:14

0

Just Modify the bootstrap CSS too:

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

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

And try.

edited Dec 17 '15 at 10:14

chriz

1,580
19
27

answered Dec 17 '15 at 09:34

user3921244

1

score 0 · Answer 2 · answered Feb 12 '16 at 20:06

Came across this while having issues with another bootstrap trick, I understand it's old but thought I'd answer it for those in the future.

The problem is that you are using row AFTER the container.

If you're trying to nest rows, you're doing it incorrectly but from your code that's not how it appears. If you are just trying to get your screen to be at 100% width all you need to do is move your .row above .container-fluid.

<div class="row">
  <div class="container-fluid">
    <div class="col-md-3 column">
      </div>
      <div class="col-md-6 column">
      </div>
      <div class="col-md-3 column">
      </div>
    </div>
</div>

Although this question is a little vague this should fix that issue.

score 0 · Answer 3 · answered Mar 10 '18 at 17:31

0

I had the same issue, and the above didn't help...

I just put: overflow: hidden to the parent div of all my containers and worked perfectly.

In my case the parent div was <div class="hfeed site" id="page">

answered Mar 10 '18 at 17:31

patricknel

13
3

Bootstrap .container > .row horizontal scroll issue

3 Answers3