javascript - 引导词缀不移动

我试图通过Bootstrap的Affix插件使网站上的导航侧栏与浏览器视图一起向下移动，但是它拒绝遵循该视图，只是停留在顶部。

这是我的HTML结构：

<div id="page-wrapper">
    <div class="container">
            <div class="row">
                <div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
                    <div class="col-xs-2" id="navigation-wrapper">
                        <div class="inner">
                            <div class="row">
                                <div class="col-xs-12">
                                    <img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div id="navigation">
                                        <a href="/" id="current-page">Home</a>
                                        <a href="/portfolio">Portfolio</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-10" id="content-wrapper">
                    <div class="inner">

                    </div>
                </div>
            </div>
        </div>
        <div id="page-push"></div>
    </div>
    <footer>
        <div class="container">

        </div>
    </footer>

资料来源：https://jsfiddle.net/tbejd5en/1/

有什么想法吗？

最佳答案

您可以将position:fixed添加到ID #navigation-affix，然后将col-xs-offset-2添加到ID #content-wrapper

div#navigation-affix {
    position: fixed !important;
}

这是小提琴：https://jsfiddle.net/tbejd5en/5/