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

答案是正确的，但每当你调整网站大小时，英雄单位将会改变为左右（20px右，20px左），因为所有元素都绑定到此body has paddings in @media max-width: 767px。只需按下面的代码修复它：

  

@media（max-width：767px）{     .hero-container {         margin-right：-20px;         margin-left：-20px;     }   }