html - TwitterBootstrapの全幅ヒーローユニット

Question

このレイアウト例では、ヒーローユニットのみを100％幅にし、デフォルトのグリッド内に配置します。たとえば、このサイトを確認してください。ヒーローユニット部分（ショーケースエリア）のみが全幅で、残りは固定幅（ナビゲーション、下部コンテンツ、フッター）になっています。

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

Answer 1

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

.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（max-width：767px）{.hero-container {margin-right：-20px; マージン左：-20px; }}