Bootstrap 3.3.7 “row” causing horizontal scroll bar

Question

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:

        
                      

              相关标签:
       
      

Answer 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

Answer 2

Why dont you use a container-fluid and completely remove the margin ?

<div class="container-fluid" style="margin: 0">
   <div class="row">
      <div class="col-md-6">

      </div>
      <div class="col-md-6">

      </div>
   </div>
</div>

Or make your own div around it with width: 100%

Answer 3

An easier way is to simply remove the margins on the offending row(s):

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

Answer 4

Are you talking about a scrollbar appearing on the bottom of the page when the container is supposed to be fluid? There might be an element in your page that is extending the width of the screen.

I usually use this Chrome extension to see what CSS elements are extending farther than they should.

Also, see if this Fiddle helps (code below).

<div class="container-fluid">
 <div class="row">
  <div class="col-sm-12">
Lorem Ipsum is simply dummied text of the printing and typesetting industry.
  </div>
 </div>
</div>

Answer 5

If someone is facing this in Bootstrap v4. Just add m-0 to your div.

<div class="row m-0"></div>