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

enter image description here

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效