Как создать 100% ширину экрана div внутри контейнера в бутстрапе?

Скажем, у меня есть следующая разметка:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            ...
            <div class="full-width-div">
            </div>
        </div>
    </div>
</div>

Теперь, как сделать .full-width-div растягиваться до полной ширины экрана? Потому что в настоящее время он ограничен внутри контейнера.

Ответы

Ответ 1

Ответ 2019, так как это все еще активно замечено сегодня

Скорее всего, вам следует заменить .container на .container-liquid, в результате чего ваш контейнер растянется на весь экран. Это позволит любому элементу внутри него естественным образом растягиваться так, как ему нужно.

оригинальный хак с 2015 года, который до сих пор работает в некоторых ситуациях

Вы должны вытащить этот div за пределы контейнера. Вы просите div растягиваться шире, чем его родитель, что, как правило, не рекомендуется.

Если по какой-то причине вы не можете вытащить его из div, вам следует изменить стиль позиции с помощью этого css:

.full-width-div {
    position: absolute;
    width: 100%;
    left: 0;
}

Вместо абсолютного, вы также можете использовать фиксированный, но тогда он не будет двигаться при прокрутке.

Ответ 3

Причина, по которой ваш full-width-div не растягивает 100% на ваш экран, из-за его родительского "контейнера", который занимает только около 80% экрана.

Если вы хотите, чтобы он растянулся на 100% на экране, вы либо зафиксировали положение "полная ширина-div", либо использовали "контейнер-жидкость" вместо "контейнера".

см. Bootstrap 3 docs: http://getbootstrap.com/css/#grid