Twitter Bootstrap - отзывчивый аффикс

Я использую Twitter Bootstrap, и у меня есть следующее:

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

Bootstrap правильно применяет эффект аффикса на <div>, и он остается неподвижным, когда я прокручиваю страницу вниз. Однако, как только я изменил размер страницы на мобильные размеры и загрузочные эффекты реагирования, (привязка к навигационной панели/объекты хорошо выравниваются друг под другом), прикрепленный <div> теперь поверх других элементов страницы и становится беспорядочным. Это происходит потому, что .affix имеет position: fixed, что очень хорошо объясняет это.

Теперь я перешел на веб-сайт Bootstrap и изменил размер страницы на мобильные размеры, прикрепленный элемент (<ul> в их случае) начинает хорошо ладить со страницей, занимая свое естественное место, не переходя на другие элементы. Я также заметил, что как только это произойдет, класс изменится с affix на affix-top.

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

Изменить: Мое наблюдение немного испорчено. Я заметил, что элемент на своей странице изначально имеет affix-top, и после прокрутки ниже data-top-offset он изменяется на affix. Он по-прежнему не объясняет, почему мой <div> не будет отображаться как их <ul> при изменении размера.

Ответы

Ответ 1

Bootstrap использует дополнительный файл CSS для своих документов, который переопределяет поведение некоторых элементов по умолчанию.

В частности, в строке 917 они меняют position прикрепленной боковой панели (как часть медиа-запроса ширины < 767px) до static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

У них есть несколько дополнительных пользовательских стилей, применяемых к прикрепленной боковой панели; вы можете просмотреть их, используя Chrome Web Inspector/Firebug в окне размера телефона.

Ответ 2

HTML Не прикрепляйте span3 (или span4 и т.д.) DIV, но его дочерний элемент; в моем случае я прикреплял #sidebar. Также вам не нужно добавлять в этот div класс .affix или data-offset-top = "XXX". Следующий трюк сделает Javascript.

  <aside class="span3">
    <div id="sidebar">
     <p>some content</p>
    </div>
  </aside>

CSS (приведенный ниже код не существует на bootstrap.css, я скопировал его из http://twitter.github.io/bootstrap/assets/css/docs.css)

.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 400px;
}

Javacript следующие js изменят класС#sidebar с .affix на .affix-bottom в зависимости от того, сколько страниц прокручивается

   $('#sidebar').affix({
      offset: {
        bottom: 450
      }
   });

Действительно, при малых разрешениях #sidebar будет перекрывать другие элементы. Чтобы решить эту проблему, используйте загрузочные медиа-запросы http://twitter.github.io/bootstrap/scaffolding.html#responsive

Как ранее отмечалось Sara, вы можете использовать что-то вроде.

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

.., чтобы вы делали #sidebar.

Надеюсь, это поможет кому-то!

Ответ 3

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

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}