Полный баннер ширины в Bootstrap/WordPress?

Question

Есть ли простой способ создать баннер с полным типом героя с помощью бутстрапа и WordPress? Я знаю, как это сделать с помощью бутстрапа, и я знаю, как взломать шаблоны WordPress, проблема кроется в том, что вы хотите этого в редакторе содержимого WordPress (возможно, с помощью короткого кода).

Итак, при использовании шаблона в Wordpress, который имеет ширину 1100 пикселей, но экран имеет ширину 1300 пикселей, простое добавление div с фоновым цветом расширяет ширину содержащего элемента шириной 1100 пикселей.

Как добавить баннер полной ширины в любом месте кода с любым элементом, содержащим размер, не нарушая правила загрузки?

Answer 1

Чтобы освободиться от содержимого div, вы можете использовать position: absolute.

Затем используйте 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>