7

私の問題は、デスクトップ上で最初にメニューを表示し、次に右端にロゴを表示するのが好きなことです。現在、テンプレートをモバイルバージョンに縮小すると、ロゴがメニューの下に表示されますが、満足のいくものではありません。メニューの前に食べたいです。プッシュ/プルを使用してみましたが、うまくいきませんでした。

モバイルビューでテンプレートの上にロゴを表示することも可能ですか？

これが私のコードです...

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="ten columns mobile-four">
                <nav>
                    <ul>
                                        <li><a href="#">link</a></li> 
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
                        <div class="two columns mobile-four">
                <a href="index.php"><img src="images/logo.png" alt="logo"/></a>
            </div>
                </div>
    </div>
4

1 に答える 1

11

したがって、最初にクラスを廃止することができますがmobile-four、それは何もしません（あなたへの習慣がない限り）。ドキュメントを見ると、がありますmobile-[one two three]。4つはそれを省略した場合と同じです。

この問題を解決するには、次のようにソース順序付けクラスを適用するだけです。

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="two columns push-ten">
                <a href="index.php">
                    <img src="images/logo.png" alt="logo" /></a>
            </div>
            <div class="ten columns pull-two">
                <nav>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

プッシュアンドプルすると、最初にメニューが正しく、次にロゴが正しく並べられます。モバイルではプッシュとプルは無視されます。つまり、モバイルではロゴがメニューの上にスタックします。

デスクトップ：[メニュー][ロゴ]

モバイル[ロゴ][メニュー]

ドキュメント： http： //foundation.zurb.com/docs/grid.php

于 2012-08-28T20:20:24.220 に答える