Фиксированный div внутри столбца начальной загрузки

Я пытаюсь создать макет с учетом двух столбцов, используя bootstrap, в левом столбце я хотел бы разместить меню, а в правой - галерею изображений. Я хотел бы, чтобы меню оставалось фиксированным, прокручивая изображения справа.

Трудность состоит в том, что я хочу, чтобы фиксированное меню было текучим с макетом начальной загрузки. Поэтому, хотя я не хочу, чтобы он перемещался вверх и вниз при прокрутке, я действительно хочу, чтобы он изменялся при изменении размера экрана.

Этот веб-сайт является примером того, что я имею в виду: http://www.galeriebertrand.com/artists

Я не могу понять, как это было сделано на этом сайте, похоже, что левый столбец имеет фиксированное позиционирование.

Ответы

Ответ 1

Вам придется использовать медиа-запросы, чтобы установить боковую панель как position: fixed, в то время как ширина экрана широкая.

Вот пример: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

В основном в этом примере столбцы становятся уложенными в ширину 768 пикселей (или маленькая ширина бутстрапов). Если вы хотите, чтобы он был уложен на другой ширине, такой как бутстрап "средняя" ширина (992px), вы хотите изменить col-sm-4, col-sm-8 на col-md-4, col-md-8 и изменить @media (min-width: 768px) to @media (min-width 992px)