Question

我在小屏幕上渲染Foundation 4时遇到问题。当在本地服务器上我有以下html代码时，我的自定义css被关闭，我的cutom js也是如此。所有需要的库都像基础库一样正确加载：

为什么我的上边栏显示在一个非常小的浏览器窗口中？

下面是一个html代码段：

<div class="row show-for-touch show-for-portrait show-for-small">
    <nav class="top-bar">
        <ul class="title-area">
            <li class="name">
                <h1><a href="index.php">title</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
            <ul class="right">
                <li><h4><a href="#" class="navlink" id="dungeonmobile">Dungeon</a></h4></li>
                <li><h4><a href="#" class="navlink"id="pricinginformationmobile">Pricing information</a></h4></li>
                <li><h4><a href="#" class="navlink" id="contactmobile">Contact</a></h4></li>
            </ul>
        </section>
    </nav>
</div>

Answer 1

如果您添加此可见性类别，则无法在小型浏览器中看到您的栏： show-for-touch ，仅显示在真实的移动环境中。

如果您想在小型浏览器上看到，只需删除此类：

<div class="row show-for-portrait show-for-small">

It works on this plunk

移动设备上的基础4顶部导航导航未显示

1 个答案: