Начальная загрузка Twitter ограничивает прокрутку одним div

Я новичок в Bootstrap и на данный момент у меня следующие настройки:

    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                  ...
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  ...
                </div>
            </div>
        </nav>
    </div>

    <div class="jumbotron">
        <div class="container">
            ...
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <ul class="nav nav-pills nav-stacked" role="tablist">
                    ...
                </ul>
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                    ...
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container text-center">
            Hello
        </div>
    </div>

Я хотел бы использовать affix или что-то подобное, чтобы позволить пользователю прокручивать как обычно, но навигационная панель, jumbotron и список навигационных таблеток сбоку должны оставаться фиксированными. Так что, по сути, единственное, что будет прокручиваться, — это содержимое справа от таблеток. Я попытался сделать это с помощью affix сам, но не знал, какое смещение установить, поэтому не смог достичь желаемого результата. Буду признателен за толчок в правильном направлении!


scroll twitter-bootstrap twitter-bootstrap-3 affix
person Keir Simmons    schedule 05.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что для ваших целей было бы лучше беспокоиться только об аффиксе для боковой навигации и использовать позиционирование CSS для вашего Jumbotron (точно так же, как Bootstrap делает для панели навигации вверху).

Для джамботрона задайте фиксированное положение и задайте явный верх (50 пикселей — это высота панели навигации над ним), установите ширину на 100 %, если вы хотите, чтобы он растягивался по всему экрану просмотра, и задайте ему явную высоту. Затем установите z-индекс на значение выше 1 и меньше 1030 (z-индекс, присвоенный навигационной панели Bootstrap). Это гарантирует, что ваш контент будет прокручиваться за вашим jumbotron.

CSS для джамботрона:

.jumbotron{
    position: fixed;
    top:50px;
    width: 100%;
    height: 200px;
    z-index: 10;
}

Затем создайте свой контейнер и задайте ему верхнее поле (высота навигационной панели) + (высота jumbotron) + (любое желаемое поле), в нашем примере это 250 пикселей + поле 30 пикселей. Это гарантирует, что ваша страница будет расположена ниже фиксированной навигации и jumbotron.

#container-id{
    margin-top:280px;
}

Для side-nav в элемент ul включите data-spy="affix". Вам не нужно устанавливать какое-либо значение для data-offset-top, потому что вы хотите, чтобы ваша боковая навигация была зафиксирована на месте немедленно.

Вот jsfiddle с примером navbar и sidenav плюс дневная доза lorem ipsum: http://jsfiddle.net/3LLZR/< /а>

person seanmhanson    schedule 05.08.2014
comment
Идеально, за исключением того, что он не очень отзывчив (поскольку столбцы сложены, это выглядит очень некрасиво). Есть ли способ применить CSS к jumbotron и аффиксу, только если столбцы не сложены? - person Keir Simmons; 06.08.2014
comment
Да, добавьте его в min-width в точке останова, которую вы выбрали для своего меню. - person Christina; 06.08.2014
comment
Я также видел, как sidenav заменялся фиксированной навигацией, оформленной по-другому, с использованием hidden-xs и т. д., чтобы скрыть sidenav, и visible-xs для соответствующего отображения замещающего содержимого. Также кажется, что есть некоторые разногласия по поводу этого/отчета об ошибке для аналогичных проблем, упомянутых в предыдущем вопросе здесь: stackoverflow.com/questions/22512168< /а> - person seanmhanson; 06.08.2014