html - 仅在 zurb 基础中在移动/平板电脑的顶部导航中显示第一项

Question

有没有办法仅在移动/平板电脑的顶部导航中显示第一个链接？

如果我在导航中有“主页”按钮，它会正常工作，但我没有，这就是问题所在。

这是我的菜单代码。如您所见，首先 li 应该只在手机和平​​板电脑上可见。

<nav class="top-bar contain-to-grid">
        <ul>
            <li><a href="#">show on mobile/tablet only</a></li>
            <li><a href="#">second</a></li>
            <li><a href="#">third</a></li>
            <li><a href="#">fourth</a></li>
            <li><a href="#">fifth</a></li>
            <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
    </nav>

Answer 1

尝试按标准使用：

可见性：隐藏；

然后使用：

@media 查询平板电脑，使用：

可见性：可见；

Answer 2

如果在 Zurb 4 中（我只看过 Zurb 4 的文档），请先尝试向其中添加show-for-small类<li>

http://foundation.zurb.com/docs/components/visibility.html列出了所有不同的可见性类。

Answer 3

您使用该类show-for-medium-down来显示移动或平板设备的元素。所以在你的例子中，如果你想隐藏导航中的第一个链接，你需要这样做：

<li class="show-for-medium-down"><a href="#">show on mobile/tablet only</a></li>