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来获得响应性固定宽度 Container 。将此课程添加到div

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

• 使用.container作为响应式固定宽度容器。
• 使用.container-fluid作为全宽容器，跨越视口的整个宽度。

Answer 2

我相信你忘记了你的容器。

＆＃13;

＆＃13;

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

＆＃13;

<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 class="container">
  <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>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您缺少HTML标记中的容器类，它必须是：

<div class="container">
   <div class="row">
      <div class="col-sm-12">
      </div>
   </div>
</div>

以下是添加了容器类的代码：

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 class="container">
      <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>
   </div>

Answer 4

删除“行”类：

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