CSSブートストラップ：水平スクロールバーが表示されます

Question

私は小さなプロジェクトでブートストラップをしようとしていますが、わからないことがあるか、間違っているはずです。 はブートストラップのものを使用して、外部CSSルールを追加することなく、水平スクロールバーが表示され、どのように私はそれを正しく修正することができます

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>

：ここに私のスニペットはありますか？

Answer 1

をあなたが応答固定幅Containerために使用.containerを必要としています。応答性の固定幅のコンテナのためにあなたのdiv

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

• 使用.containerにこのクラスを追加します。
• .container-fluidを、ビューポートの幅全体にまたがる幅の広いコンテナに使用します。

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

Answer 3

クラスの行 '形式を削除します。

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

Answer 4

あなたの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>

を