Twitter Bootstrap Question posted in

Bootstrap width slightly too wide on mobile – Twitter bootstrap

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?

Tags:

2

Answers


  1. 0

    The best way to use a row class is that inside it you use column class in bootstrap. Thats why it is builded so if you want your div with the text fill the row you apply this:

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

            <div class="col-md-12">
                <div>
                    More text
                </div>
            </div>
        </div>
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search