ブートストラップ3中央の内容の流体容器

Question

これは単純なものかもしれませんが、私はまだそれを理解していません。

フルハイトの流体コンテナを作成し、ナビゲーションを含むコンテンツを非流体コンテナのようにページの中央に配置するにはどうすればよいですか？

コンテンツを一定の幅に保ちながら、ページ全体にまたがるトップのナビゲーション/ヘッダーの背景を取得しようとしています。

Answer 1

.containerをナビゲーションコンテンツに囲み、背景スタイリングを追加する別の<div>で囲むことができます。次の例を参照してください：

.background { 
 
    background-color: #f99; 
 
} 
 

 
.content { 
 
    background-color: #9f9; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="background"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 content">Content</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ラフ方法は、ブートストラップ・グリッドの概念を使用することです。 ブートストラップは行を12列に分割します。 トリックは、4スペースブロックの前後に4ブラックスペースブロックを挿入することから成ります。 例：

<div class="container-fluid"> 
 
\t <div class="row"> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
     
 
\t \t <div class="col-sm-4"> 
 
\t \t \t <h2>Title</h2> 
 
\t \t \t <p>Your content here</p> 
 
\t \t </div> 
 
     
 
\t \t <div class="col-sm-4"></div> 
 
\t </div> 
 
</div>