CSS Bootstrap：出现水平滚动条

我正在尝试一个小项目的Bootstrap,但有一些我不明白或我应该做错.这是我的片段：

nav{
  background-color: lightblue;
}
section{
  background-color: lightgreen;
  }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
</div>

出现水平滚动条,如何在不添加外部css规则的情况下正确修复它,仅使用Bootstrap？

您需要使用.container来获得响应的固定宽度 Container.将此类添加到您的div中

<div id="mainContainer" class="row container">

>使用.container作为响应式固定宽度容器.>对于全宽容器使用.container-fluid,跨越视口的整个宽度.