1

Twitter ブートストラップ ドキュメント サイトでは、モバイル レイアウトで左側のナビゲーションが上部に固定されます。例: http://twitter.github.com/bootstrap/javascript.html

Bootstrap サイトで行われているように、 ...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/

最新のブートストラップ v2.3.1 を使用して、モバイル レイアウトで「接辞ナビゲーション」を上部に固定したい。どうすればいいですか？助言がありますか？

4

1 に答える 1

2

モバイル画面のメニューは、常に最も簡単に操作できるとは限りません。

開始したレイアウトを使用して、モバイル画面の固定動作を削除する簡単なアイデアを次に示します: http://jsfiddle.net/panchroma/ZuELd/。これを行うと、メニューが通常の流れに戻り、コンテンツが適切な位置に収まるようになります。

メニュー リンクを微調整したり、モバイル画面用に横方向のリストに変更したりする必要があるかもしれませんが、ここから行うのは簡単です。

CSS 

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

}

幸運を！

于 2013-04-04T22:07:07.000 に答える