Twitter Bootstrap，词缀，如何让导航在移动布局的顶部保持静态

Question

twitter 引导文档网站，左侧导航固定在移动布局的顶部。 例如：http://twitter.github.com/bootstrap/javascript.html

我想在不使用 ...docs.css 的情况下做同样的事情，就像在 Bootstrap 站点中所做的那样。

目前，我面临的问题是，当您滚动浏览内容时，“附加导航”会停留在移动维度的内容之上。

<div class="row">
<div class="span3">
    <div data-spy="affix">
        <ul class="nav nav-list nav-stacked">
            <li><a href="#objective"> Objective </a>
            </li>
            <li><a href="#experience"> Experience </a>
            </li>
            <li><a href="#skills"> Skills </a>
            </li>
            <li><a href="#education"> Education </a>
            </li>
        </ul>
    </div>
</div>
<div class="span9">
    <section id="objective">
        <div class="page-header">
             <h1>
                Objective: <small> Do good </small>
            </h1>

        </div>
    </section>
    <section id="experience">
        <div class="page-header">
             <h1>
                Exprience: <small> I worked at a bit </small>
            </h1>

        </div>
    </section>
    <section id="skills">
        <div class="page-header">
             <h1>
                skills: <small> my skillz </small>
            </h1>

        </div>
    </section>
    <section id="education">
        <div class="page-header">
             <h1>
                education: <small> I went to school </small>
            </h1>
        </div>
    </section>
</div>

http://jsfiddle.net/gPsWe/1/

我希望使用最新的引导程序 v2.3.1 将“词缀导航”固定在移动布局的顶部。我该怎么做？有什么建议吗？

Answer 1

移动屏幕的菜单并不总是最容易使用的东西。

使用您开始使用的布局，这里有一个简单的想法，您可以删除移动屏幕的附加行为：http://jsfiddle.net/panchroma/ZuELd/。这样做会将菜单返回到正常流程，这样内容就会很好地落入下方。

您可能需要微调菜单链接，甚至是针对移动屏幕的change them to a horizontal list，但这很容易从这里完成。

CSS

@media (max-width: 767px){
.affix{
    position:static;
}

}

祝你好运！