Bootstrap / WordPress中的全宽横幅？答案

【问题标题】：Full width banner in Bootstrap / WordPress?Bootstrap / WordPress中的全宽横幅？
【发布时间】：2017-05-25 05:23:13
【问题描述】：

有没有一种简单的方法可以使用 bootstrap 和 WordPress 制作全宽英雄类型横幅？我知道如何使用引导程序来做到这一点，并且我知道如何破解 WordPress 模板，问题出在您想要在 WordPress 内容编辑器中进行此操作（甚至可能通过短代码）。

因此，如果在 wordpress 中使用 1100 像素宽的模板，但屏幕是 1300 像素宽，那么简单地添加具有背景颜色的 div 只会扩展 1100 像素宽的包含元素的宽度。

如何在不违反引导规则的情况下在代码中的任意位置添加包含任意大小元素的全角横幅？

【问题讨论】：

【解决方案1】：

您可以使用position: absolute 来摆脱包含的 div。

然后使用left: 0px; width: 100% 使用浏览器的全宽。

然后，将你的英雄包裹在其中。所以：

<div style="position: absolute; left: 0px; width: 100%;">
  <div class="hero-unit">
    <h1>Heading</h1>
    <p>etc.</p>
  </div>
</div>

您将遇到的问题是后续内容将忽略这个关于垂直定位的新 div。

对此的一种破解方法是添加具有适当高度调整的块级内容（与绝对定位的 div 的高度匹配），例如

<div style="height:500px"></div>

【讨论】：