全幅英雄ユニットin Twitter Bootstrap

Question

this example layout英雄ユニットのみを100％幅にして、デフォルトグリッド内に置いておきたいです。たとえば、check this siteです。ヒーローユニット部分（ショーケース領域）は全幅で固定幅（ナビゲーション、ボトムコンテンツ、フッター）で残ります。

私はレスポンシブデザインの機能を失うことなくこれを行う必要があります。

Answer 1

.hero-unit divを.container divの外に移動します。

.containerのスタイルでは、設定した幅に制限されます。その内部にあるものはその親の最大幅を持ちます。 の代わり：

<div class="container"> 
    <div class="hero-unit"> 
    </div> 
</div> 

使用：

<div class="hero-unit"> 
</div> 
<div class="container"> 
</div> 

Answer 2

まあ答えは正しいですが、あなたはサイトのサイズを変更するたびに、英雄ユニットは、その後の周りのスペースを持つように変更されます（20ピクセルの右、左20ピクセル）ため、すべての要素はこのbody has paddings in @media max-width: 767pxにバインドされています。

@media（最大幅：767px）{ .heroコンテナ{ マージン右：あまりにもそれを修正するには、以下のコードやる-20pxを。 margin-left：-20px; } }