从小屏幕更改为大屏幕时，基础顶部条形图部分没有响应

Question

以下是我正在使用的html：

<div class="fixed contain-to-grid">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Name</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><a href="#intro">Home</a></li>
                    <li><a href="#photo">Photos</li>
                    <li><a href="#video">Videos</li>
                    <li><a href="#blog">Blog</li>
                    <li><a href="#contact">Contact</li>
                </ul>
            </section>
        </nav>
    </div>

默认情况下，它看起来是这样的：

                                                       Home Photos Videos Blog Contact

当我缩小浏览器的大小时，它工作得很好，最小的时候，它会变成汉堡菜单。但是当我把尺寸增加到正常时，li标签就不会像往常一样排列了。它们看起来像这样：

                                                                       Home     Photos
                                                                       Videos   Blog
                                                                       Contact

我做错了什么？

Answer 1

基金会的顶部栏存在已知的响应问题。但是你最上面的酒吧看起来很简单。可以为你工作。如果修复html标记可以消除问题，请首先尝试。您缺少</a>-标记。

参见：

                <li><a href="#photo">Photos</li>
                <li><a href="#video">Videos</li>
                <li><a href="#blog">Blog</li>
                <li><a href="#contact">Contact</li>