CSS Bootstrap:出现水平滚动条

Question

我正在尝试一个小项目的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？

Answer 1

您需要使用.container响应式固定宽度容器.将此课程添加到您的div

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

• 使用.container一个响应固定宽度的容器.
• 使用.container-fluid了全宽的容器,跨越视口的整个宽度.