html - 使用 Bootstrap 侧导航栏

Question

我已经实现了 Bootstrap ，如果你转到:http://twitter.github.com/bootstrap/javascript.html#affix

我很想在左侧栏上添加一个词缀，当我向下滚动时，侧栏会保持在 ScrollView 中。我无法让它工作。我尝试了一切。我需要做任何想法或技巧才能使它正常工作吗？

我尝试了数据元素和 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 的源代码他们就是这样做的。

我试着用你的代码来做，它有效:)