Question

我的问题是，在桌面上我喜欢先打开菜单，然后是最右边的徽标。目前，当我将模板缩小为移动版时，徽标会出现在菜单下，这是不令人满意的。我希望在菜单之前有它。我尝试使用推/拉没有成功。

在移动视图中，甚至可以在模板顶部放置徽标吗？

这是我的代码......

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

Answer 1

首先，你可以取消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

重新排列Zurb基金会的专栏

1 个答案: