Question

如果您转到：http://twitter.github.com/bootstrap/javascript.html#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>

Answer 1

它不起作用，因为您要将{}添加到div，而应将其添加到ul。

如果您检查Twitter Bootstrap Javascript page的源代码，那就是他们如何做到这一点。

我尝试使用您的代码执行此操作：）

Answer 2

转到第19行的application.js.

这样你就可以让sidenav的自定义填充停在你想要的适当位置。

使用bootstrap侧导航栏

2 个答案: