全寬英雄單位

Question

在this example layout我想唯一的英雄單位，以100％的寬度，默認網格內休息。例如，check this site。它只有主人公單元部分在固定寬（導航，底部內容，頁腳）全寬和休息（展示區）。

我需要這樣做而不會失去響應式設計功能。

Answer 1

移動你的.hero-unit 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（最大寬度：767px）{ .hero容器{ 餘量右：-20px; 保證金左：-20px; } }