CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
bergjs
bergjs

Reputation: 133

Twitter Bootstrap 3 RC1 horizontal scroll issue

I'm using Bootstrap 3 RC1 and even though there is nothing but a row and a column, I can scroll horizontally just a little bit. I'd prefer not to have any horizontal scrolling at all.

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

Upvotes: 2

Views: 3123

Answers (3)

Sudharshan
Sudharshan

Reputation: 3823

You can fix this problem without disturbing the bootstrap css and wait for a fix in the next version, so you can simply wrap your row by defining you own class .container-fluid with padding.

//Add this class to your global css file
<style>
   .container-fluid {
       padding: 0 15px;  
   }
</style>

   //Wrap your rows in within this .container-fluid 
   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">content</div>
          <div class="col-md-9">content</div>
          <div class="col-md-3">content</div>
      </div>
   </div>

Upvotes: 0

Andrew Keller
Andrew Keller

Reputation: 3239

For anyone else coming across this problem, what fixed it for me was wrapping all row/form/etc. elements in a <div class="container"> block.

Upvotes: 1

oztecnic
oztecnic

Reputation: 156

It has a bug because of negative margins;

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

You can override bootstrap with this;

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

Check here also; https://github.com/twbs/bootstrap/issues/6686

Upvotes: 9

Related Questions