Darren Darren - 7 months ago 90
HTML Question

Bootstrap width slightly too wide on mobile

I'm just starting out with and after setting up a simple page it started to appear a few pixels too wide on mobile.
I've narrowed it down to some very simple code:

<div class="container">
<div class="row">
<div>Some text</div>

<div class="row">
<div>
More text
</div>
</div>
</div>
</div>


I do have a header in there too, but that's not the problem.

If I remove the More text
div
's it fills the mobile screen nicely, however with them in I can scroll the screen a couple of pixels either side.

Can someone explain why this is happening?

Answer

According to Boostrap Docs, you can't have row as direct child of row

The only time you can have row as child of row is when you are nesting columns, in this case row would be grand child of row

  • your example using nested cols

.col-xs-12 {
  background: red
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>Some text</div>
      <div class="row">
        <div class="col-xs-12">
          More text
        </div>
      </div>
    </div>
  </div>
</div>

  • your example with no row child

.col-xs-12 {
  background: red
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>Some text</div>
      <div>More text</div>
    </div>
  </div>
</div>