Html 使用引导侧导航栏

Using bootstrap side navbar

提问by TMan

I've implemented bootstrap, if you goto: http://twitter.github.com/bootstrap/javascript.html#affix

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

Im tyring to apply an affix to the left side bar where when I scroll down the side bar stays with the scroll in view. I cannot get this to work. I tried everything. Any ideas or tricks I need to do to get this working?

我很想将词缀应用到左侧栏，当我向下滚动时，侧栏会与滚动条保持一致。我不能让它工作。我尝试了一切。我需要做任何想法或技巧才能使其正常工作？

I tried the data element and javascript way, neither work. I do have the bootstrap.js, bootstrap.cs, and bootstrap-responsive.cs implemented as well.

我尝试了数据元素和 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>

采纳答案by mokagio

It doesn't work because you are adding the affix to the divwhile you should add it to the ul.

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

If you inspect the source code of the Twitter Bootstrap Javascript pagethat's how they do it.

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

I tried to do it with your code and it works :)

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

回答by user2296553

Go to the application.js, Line 19.

转到 application.js，第 19 行。

This will allow you to make custom padding for the sidenav to stop in the appropriate spot that you want it too.

这将允许您为 sidenav 制作自定义填充以停在您想要的适当位置。