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

Twitter Bootstrap, affix, how to have nav stay static at the top in mobile layout

本文关键字：布局 顶部 静态 移动 导航 词缀 Bootstrap Twitter      更新时间：2023-09-26

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。我该怎么做呢?有什么建议吗?

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

使用你已经开始的布局，这里有一个简单的想法，你删除移动屏幕的固定行为:http://jsfiddle.net/panchroma/ZuELd/。这样做会使菜单返回到正常的流程，这样内容就会很好地落在下面。

您可能需要微调菜单链接，甚至将它们更改为移动屏幕的水平列表，但这很容易从这里完成。

CSS 

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

祝你好运!

相关文章：