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

Question

twitter bootstrap 文档站点，左侧导航固定在移动布局的顶部。例如: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/

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

Answer 1

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

使用您开始使用的布局，这是一个简单的想法，您可以在其中删除移动屏幕的附加行为:http://jsfiddle.net/panchroma/ZuELd/ .这样做会使菜单恢复正常流动，这样内容就可以很好地放置在下面。

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

CSS

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

}

祝你好运!