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-markup 消除问题。您遗失了</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>

从小屏幕变为大屏幕时，基础顶栏部分无响应

1 个答案: