Bootstrap Affix Changing List Item Width

Question

I'm using Twitter Bootstrap's affix to affix the left column which currently holds a navigation list.

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" data-spy="affix" data-offset-top="300">
            <li class="nav-header">Navigation</li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
        </ul>
    </div>

From my understanding, this means that affix won't kick in until 300px have been scrolled. My problem is that the width of my list item changes after affix kicks in.

Here is a screenshot of my hovering over a list item before affix kicks in. You can based on the hover background, the width is correct.

Here is a screenshot after I've scrolled 300px and affix kicks in. You can see that for some reason the width decreases.

I want to know why this is happening, how to correct it, and if I am using affix correctly.

Answer 1

After some research, I've figured out what the issue is.

1. Before the affix kicks in, the width is inherited from the 'span3' div with parents my affixed nav.

2. After affix kicks in, that affixed nav is removed from that parent which is why it's losing it's width. The affix plugin basically rips it out of the DOM and places the affixed element manually on top.

The solution is to manually give the .affix class a width. In my case, I've given it a width that simulates a span3 parent.

.affix {
    position: fixed;
    top: 20px;
    width: 190px;
}

span3 is 220px width, with 15px padding on both left and right. So my putting the above CSS has worked.

If you have multiple affixes, you'd have to properly select and apply the different widths.