7

我已经实现了引导程序，如果你去：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>
4

2 回答 2

5

它不起作用，因为您将词缀添加到divwhile 您应该将其添加到ul.

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

我试图用你的代码来做它并且它有效:)

于 2012-09-22T09:37:59.770 回答
1

转到 application.js，第 19 行。

这将允许您为 sidenav 进行自定义填充，以便在您想要的适当位置停止。

于 2013-04-18T19:00:56.310 回答