Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this:
<div class="row">
<div class="col-sm-12">
stuff
</div>
</div>
And there is still a horizontal scroll bar. In dev tools, I can find the row
:
.row {
margin-right: -15px;
margin-left: -15px;
}
And if I un-click margin-right: -15px;
then the problem goes away. But, on my actual page (with all of the content) this creates another problem. The page needs to have zero margins, but it now was a 15px margin on the right.
One of the answers here sad to wrap row
with container-fluid
. Another said to wrap it in container
. Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.
I've found threads discussing this as far back as 2013. Is this really not fixed yet?
What do I need to do?
Also: Fiddle
https://jsfiddle.net/oLx4g8e3/1/
First of all you don't need row
or col-*12
classes if your section is 100% wide look at this bootstrap example they have not taken any row
or col-*12
neither with header nor jumbotron. If your section has column Just take row inside col-*
classes for example
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
Fiddle
Or in case if you are using container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
<div class="col-sm-6">
<div class="row">stuff</div>
</div>
</div>
</div>
Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With