使用Bootstrap侧边栏导航栏

Question

我已经实现了bootstrap，如果您转到：http://twitter.github.com/bootstrap/javascript.html#affix。 我正在尝试将affix应用于左侧边栏，当我滚动时，侧边栏停留在可视区域内。 但我无法让它起作用。 我已经尝试了所有方法，但还是无法运行。您有任何想法或技巧来帮我解决这个问题吗？我已经尝试了数据元素和JavaScript方法，但都不起作用。同时，我已经实施了bootstrap.js、bootstrap.cs和bootstrap-responsive.cs。

<div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
        <div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="200" >

            <ul class="nav nav-list bs-docs-sidenav">
                <li><a href="#AccountId"><i class="icon-chevron-right"></i>My Account</a></li>
                <li><a href="#tutorialid"><i class="icon-chevron-right"></i>My Tutorials</a></li>
                <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i>My Articles</a></li>
                <li><a href="#navs"><i class="icon-chevron-right"></i>Help</a></li>
            </ul>

        </div>
        <div class="span9">
            <!-- Typography
             ================================================== -->
            <section id="AccountId">
                <div class="page-header">
                     <h1>My Account</h1>

                </div>
                <div class="bs-docs-example">
                     <h3><b>Change Password</b></h3>

                    <div>
                        <label>Current Password</label>
                        <input type="text" />
                        <label>New Password</label>
                        <input type="text" />
                        <label>Confirm Password</label>
                        <input type="text" />
                        <br />
                        <input type="button" class="btn btn-primary" value="Submit" />
                    </div>
                     <h3><b>Tutorial Settings</b></h3>

                    <div>
                        <label>Current Password</label>
                        <input type="text" />
                        <label>New Password</label>
                        <input type="text" />
                        <label>Confirm Password</label>
                        <input type="text" />
                        <br />
                        <input type="button" class="btn btn-primary" value="Submit" />
                    </div>
                     <h3><b>Article Settings</b></h3>

                    <div>
                        <label>Current Password</label>
                        <input type="text" />
                        <label>New Password</label>
                        <input type="text" />
                        <label>Confirm Password</label>
                        <input type="text" />
                        <br />
                        <input type="button" class="btn btn-primary" value="Submit" />
                    </div>
                </div>
            </section>@* Tutorials *@
            <section id="tutorialid">
                <div class="page-header">
                     <h1>My Tutorials</h1>

                </div>
                <div class="bs-docs-example"></div>
            </section>
        </div>
    </div>
</div>

- TMan

---

你是否已经添加了Bootstrap的JS文件？ - Arpit Srivastava

是的，我已经添加了它以及CS和响应式CS。 - TMan

按照什么顺序？你的JS顺序如下：jQuery先，bootstrap插件包第二。 - Andres Ilich

Answer 1

它不起作用是因为您将词缀添加到

而应该将其添加到

。

如果您检查Twitter Bootstrap Javascript页面的源代码，就是这样做的。

我尝试使用您的代码进行操作，它可以正常工作 :)

- mokagio

---

我试过了，不起作用。我没有看到他们在 <ul> 上设置 data-spy="affix" data-offset-top="200" 的地方。我右键点击查看页面源代码，他们并没有在 ul 上这样做，实际上他们根本没有这样做。 - TMan

你在这样做的时候，是否也包括<link href="assets/css/docs.css" rel="stylesheet">？我尝试了包括和不包括它两种方式。 - TMan

好的，事实证明使用我上面提到的CSS是它无法正常工作的原因，我想要那种样式，所以我只是删除了所有与固定有关的内容，猜测这是覆盖了它。感谢您的帮助。 - TMan

Answer 2

请前往application.js，第19行。

这将允许您为侧边栏制定自定义填充，以停在您想要的适当位置。

- user2296553