Twitter Bootstrap中的全宽英雄单位

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

答案是正确的,但每当你调整网站大小时,英雄单位将改变为有空格(左右20px,左边20px),因为所有元素都绑定到此body has paddings in @media max-width: 767px.只需执行以下代码即可修复它:

@media(max-width:767px){.machine-container {margin-right:-20px; margin-left:-20px; }}