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], 四个相当于将其关闭。

要解决此问题，只需应用源排序类，如下所示：

<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 回答