Css Bootstrap/WordPress中的全宽横幅？

有没有一种简单的方法可以使用bootstrap和WordPress制作一个全宽的英雄式横幅？我知道如何使用bootstrap，我知道如何破解WordPress模板，问题在于当你想在WordPress内容编辑器中实现这一点时（甚至可能通过短代码）

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

---

如何在代码中的任意位置添加一个全宽横幅，包含任意大小的包含元素，而不违反引导规则？

您可以使用

位置：绝对

从包含的div中挣脱出来

然后使用

left:0px；宽度：100%

使用浏览器的全宽

然后，把你的英雄包在里面。因此：

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

标题
等等

您将遇到的问题是，后续内容将忽略垂直定位方面的新div

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

有道理。可能需要使用外部css，这样我就可以使用媒体查询来破解精确的高度，因为它会随着各种响应状态的变化而变化？此外，如果任何容器都是相对放置的，这可能不会一直中断到全宽正确吗？@Marty Right。你应该确保你没有相对定位的祖先。如果您没有显示固定高度的横幅，那么使用媒体查询破解高度调整可能会奏效。

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