Question

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

我想在不使用引导程序站点中的... docs.css的情况下执行相同的操作。

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

<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将'affix nav'固定在移动布局的顶部。我该怎么办呢？有什么建议吗？

Answer 1

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

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

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

CSS

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

}

祝你好运！

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

1 个答案: