css - Foundation - 不想隐藏导航栏的右键

Question

在较宽的屏幕上我的登录按钮是可见的，但在较小的屏幕上它是隐藏的。

JSBIN http://jsbin.com/nowubuseqeza/1/edit?html,js,output

相关代码:

<div class="top-bar" data-topbar="" style="background:#074e68">
    <ul class="title-area">
        <li class="name">
            <h1><a href="/"><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</a></h1>
        </li>
    </ul>

    <div class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
            <li class="active">
                <a href="/login/">Login</a>
            </li>
        </ul>
    </div>
</div>

是否有可能在所有情况下都可见？否则我的用户无法登录。

Answer 1

将您的代码更改为此 DEMO

<div class="top-bar" data-topbar="" style="background:#074e68">
    <div class="top-bar-section right">
        <!-- Right Nav Section -->
        <ul class="right show-for-small">
            <li class="active">
                <a href="/login/">Login</a>
            </li>
        </ul>
    </div>
    <ul class="title-area">
        <li class="name">
            <h1><a href="/"><img class="left" src="images/pluslogo.png" style="margin:2px 1em;height:40px;width:40px" alt="Pacific Medical Training"> Pacific Medical Training</a></h1>
        </li>
    </ul>

    <div class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
            <li class="active">
                <a href="/login/">Login</a>
            </li>
        </ul>
    </div>
</div>