ブートストラップ3コンテナ内のコンテナ流体を追加しますか？

Question

私は普通のコンテナを持っていて、このコンテナ内にフルサイズのコンテナ流体を追加したいので、コンテナは画面全体でフル・ビュー・ポイントになります。 私はこれを試しましたが、それは全幅になっていません。

<div class="container"> 

<div class="container-fluid"> 

</div> 

</div> 

私によると、コンテナ流体は容器全体ではなく画面全体で全幅になっています。それを無効にする方法はありますか？

Answer 1

あなたは.containerの内側.container-fluidを使用し、あなたが達成しようとしているものを手に入れることができません。ブートストラップの.containerクラスのコードを見てください。それは一定の幅を有する。

固定幅の容器の外側に.container-fluidを使用する必要があります。

例は以下の通りです：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p>Some Content</p> 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <p>Item 1</p> 
     </div> 

     <div class="col-md-4"> 
      <p>Item 2</p> 
     </div> 

     <div class="col-md-4"> 
      <p>Item 3</p> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <p>Some More Content</p> 
     </div> 
    </div> 
</div> 

あなたはブートストラップ・グリッドを利用するために必要な場所それは、サイト全体の複数のコンテナを持っていることは完全に許容です。

Answer 2

container-fluidの代わりにrowを追加してください。

<style> 
.container { background: #ccc;} 
.fullwidth { background: #000;} 
</style>  
<div class="fullwidth"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <p>content</p> 
     </div> 
     </div> 
    </div> 
    </div>