html - Bootstrap 宽度在移动设备上略微太宽

Question

我刚开始使用 twitter-bootstrap在设置了一个简单的页面后，它开始在移动设备上显得太宽了几个像素。 我已将其缩小为一些非常简单的代码:

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

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

我也有一个标题，但这不是问题。

如果我删除更多文本 div，它会很好地填满移动屏幕，但是有了它们我可以在屏幕两侧滚动几个像素。

谁能解释为什么会这样？

Answer 1

根据 Boostrap Docs ，您不能将 row 作为 row 的 direct child

只有在嵌套列时才能将 row 作为 row 的子项，在这种情况下 row 将是孙子项行

• 您的示例使用嵌套的 col

.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>

• 你的例子没有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>