Bootstrap / WordPress中的全宽横幅？

Question

有没有一种简单的方法可以使用bootstrap和WordPress制作全宽英雄型横幅？我知道如何使用bootstrap，我知道如何破解WordPress模板，问题出在你想要在WordPress内容编辑器中（或许甚至通过短代码）。

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

如何在不破坏引导规则的情况下，使用任何大小的包含元素在代码中的任何位置添加全宽横幅？

Answer 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>