CSS Bootstrap：出现水平滚动条答案

【问题标题】：CSS Bootstrap: an horizontal scrollbar appearsCSS Bootstrap：出现水平滚动条
【发布时间】：2016-12-23 10:31:56
【问题描述】：

我正在一个小项目上尝试 Bootstrap，但是有一些我不明白或者我应该做错的事情。这是我的sn-p：

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 规则？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：

谢谢，但我需要全角布局，因此 container-fluid 更合适（Rajshekar Reddy 的回答）。

【解决方案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>

【讨论】：

谢谢，但我需要全角布局，所以container-fluid 更合适（Rajshekar Reddy 的回答）。

【解决方案4】：

删除类“行”形式：

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

【讨论】：

【解决方案5】：

使用 .overflow-hidden 类在 .row 周围添加一个包装器：

<div class="container overflow-hidden">

【讨论】：