Bootstrap 3 Affix链接无法在xs屏幕尺寸下工作

Question

我正在使用Bootstrap 3创建我妻子的网站。我的页面顶部有一个固定的导航栏，想要在左侧修改过滤器菜单。我有这个，当屏幕大小很大，中等甚至很小时，它似乎正在运行并且工作正常，但是当我的顶部导航上的-collapse菜单踢进我的过滤器上的链接变得多余而且实际上什么都不做。我不太确定我做错了什么。有任何想法吗？我在这里添加了一个jsfiddle。

http://jsfiddle.net/iameuanmackay/mhk11q52/

代码在这里：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                 <h1>logo</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button> <a class="navbar-brand active" href="index.html">home</a>

                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="portfolio.html">portfolio</a>
                        </li>
                        <li><a href="blog.html">blog</a>
                        </li>
                        <li><a href="contact.html">contact</a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!-- rheader -->
        </div>
        <!--end col -->
    </div>
    <!-- end row -->
</div>
<!-- end container -->
<!-- Begin page content -->
<div class="container-fluid">
    <div id="portfolio">
        <div class="row">
            <div class="col-xs-1 col-xs-offset-1 col-sm-1 col-sm-offset-2">
                <div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
                    <ul id="filter">
                        <!--This is where the filter links go and and the affix seems to have gone wrong -->
                        <li style="list-style-type: none" class="all"><a href="#">all</a>
                        </li>
                        <li style="list-style-type: none" class="people"><a href="#people">people</a>
                        </li>
                        <li style="list-style-type: none" class="things"><a href="#things">things</a>
                        </li>
                    </ul>
                </div>
            </div>

任何指针都会非常感激。