Twitter Bootstrap - Responsive Affix

Question

I am using Twitter Bootstrap and I have the following:

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

Bootstrap correctly applies the affix effect on the <div> , and it stays motionless as I scroll down the page. However, as soon as I changed the page size to mobile sizes and responsive loading effects, (binding to the navigation bar / objects align well under each other), the attached <div> now on top of other page elements and becomes messy. This is because .affix has position: fixed , which explains it very well.

Now I went to the Bootstrap website and changed the page size to mobile sizes, the attached element ( <ul> in their case) starts to get along well with the page, taking its natural place, without switching to other elements. I also noticed that as soon as this happens, the class will change from affix to affix-top .

I'm not sure if this is their setup or part of this framework, because the structure does not seem to behave the same. Can anyone clarify this? I need to have the same behavior on my <div> , where if the page is resized to a mobile size, the attached element will take its natural place.

Edit: My observation is a bit flawed. I noticed that the element on my page initially has affix-top , and after scrolling below data-top-offset it changes to affix . It still doesn't explain why my <div> will not display as their <ul> when resized.

Answer 1

Bootstrap uses an additional CSS file for its documents , which overrides the default behavior of some elements.

In particular, on line 917 they change the position attached sidebar (as part of a media request of width <767px) to static :

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

They have several additional custom styles applied to the attached sidebar; You can view them using Chrome Web Inspector / Firebug in the phone size window.

Answer 2

HTML Do not attach span3 (or span4, etc.) to a DIV, but its child; in my case I attached #sidebar. Also, you do not need to add the .affix class or data-offset-top = "XXX" to this div. The following trick will do Javascript.

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

CSS (the code below does not exist on bootstrap.css, I copied it from http://twitter.imtqy.com/bootstrap/assets/css/docs.css )

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

Javacript following js will change the class # sidebar from .affix to .affix-bottom depending on how many pages it scrolls

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

Indeed, at low resolutions, #sidebar will overlap other elements. To solve this problem, use bootable media queries http://twitter.imtqy.com/bootstrap/scaffolding.html#responsive

As Sara noted earlier, you can use something like.

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

.. so you do #sidebar.

Hope this helps someone!

Answer 3

I had the same problem and my solution was to remove the affix behavior for smaller screen sizes. For example, to remove it for sizes below 1199 pixels:

 #map { @media (min-width: 1199px) { &.affix-top { } &.affix { position: fixed; top: 20px; bottom: 100px; } &.affix-bottom { } } }