В этот пример макета Я хочу, чтобы только единица героя была на 100% шириной и оставалась в сетке по умолчанию. Например, проверить этот сайт. Он имеет только часть героя (площадь витрины) в полной ширине и отдыха в фиксированной ширине (навигация, нижнее содержимое, нижний колонтитул).
Мне нужно сделать это, не теряя отзывчивую конструктивную особенность.
переместите свой .hero-unit div вне вашего .container div.
стиль .container ограничивает ширину набора. и все, что внутри него, будет иметь максимальную ширину родителя.
вместо:
<div class="container">
<div class="hero-unit">
</div>
</div>
использование:
<div class="hero-unit">
</div>
<div class="container">
</div>
Хорошо, что ответ правильный, но всякий раз, когда вы изменяете размер сайта, герой-единица будет меняться, чтобы иметь пробелы вокруг (20 пикселей справа, 20 пикселей слева), потому что все элементы привязаны к этому body has paddings in @media max-width: 767px. Просто выполните код ниже, чтобы исправить это:
@media (max-width: 767px) { .hero-container { margin-right: -20px; margin-left: -20px; } }