html - Twitter Bootstrap 中的全宽英雄单元

Question

在这个示例布局中，我只希望英雄单位为 100% 宽并位于默认网格内。例如，检查这个站点。它只有全宽的英雄单元部分（展示区域）和固定宽度的其余部分（导航、底部内容、页脚）。

我需要在不丢失响应式设计功能的情况下做到这一点。

Answer 1

将您的 div移到您的.hero-unitdiv 之外.container。

该.container样式将您限制在设定的宽度内。并且其中的任何内容都将具有其父级的最大宽度。代替：

<div class="container">
   <div class="hero-unit">
   </div>
</div>

利用：

<div class="hero-unit">
</div>
<div class="container">
</div>

Answer 2

答案是正确的，但是每当你调整网站大小时， hero-unit 都会改变为周围有空格（右 20 像素，左 20 像素），因为所有元素都绑定到 this body has paddings in @media max-width: 767px。只需执行以下代码即可修复它：

@media (max-width: 767px) { .hero-container { margin-right: -20px; 左边距：-20px；} }