Html Twitter Bootstrap 中的全宽英雄单元
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10482850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width hero unit in Twitter Bootstrap
提问by eth.block
In this example layoutI want only hero unit to be 100% wide and rest within the default grid. For example, check this site. It has only the hero unit part (showcase area) in full width and rest in fixed width (navigation, bottom content, footer).
在这个示例布局中，我只希望英雄单位为 100% 宽并位于默认网格内。例如，检查这个站点。它只有全宽的英雄单元部分（展示区域）和固定宽度的其余部分（导航、底部内容、页脚）。
I need to do this without losing responsive design feature.
我需要在不失去响应式设计功能的情况下做到这一点。
回答by Rodik
move your .hero-unitdiv outside of your .containerdiv.
将你的.hero-unitdiv移到你的div 之外.container。
the .containerstyle confines you to a set width. and anything inside it will have a maximum width of it's parent.
instead of:
该.container样式将您限制在设定的宽度内。并且其中的任何内容都将具有其父级的最大宽度。代替：
<div class="container">
<div class="hero-unit">
</div>
</div>
use:
用：
<div class="hero-unit">
</div>
<div class="container">
</div>
回答by bsides
Well the answer is right but whenever you resize the site, hero-unit will then change to have spaces around (20px right, 20px left) because all the elements are bound to this body has paddings in @media max-width: 767px. Just do the code below to fix it too:
答案是正确的，但是每当您调整站点大小时， hero-unit 将更改为周围有空格（右 20 像素，左 20 像素），因为所有元素都绑定到 this body has paddings in @media max-width: 767px。只需执行以下代码即可修复它：
@media (max-width: 767px) { .hero-container { margin-right: -20px; margin-left: -20px; } }
@media (max-width: 767px) { .hero-container { margin-right: -20px; 左边距：-20px；} }
