css - 为什么 Foundation topbar 没有响应？

Question

它们实际上不在实际的 Zurb 站点上，不完整。

如果你去这里:http://foundation.zurb.com/docs/components/topbar.html ans 滚动到内置组件，您会看到我的问题。它根本不是计算机屏幕上的响应组件。它在移动设备(无论如何在 Nexus 4 上)和 Nexus 7 的纵向模式下都很好，但即使在 Nexus 7 的横向模式下也是错误的。

这是我的代码。我的三个内容部分需要 3 个下拉列表，并希望将它们并排放置。我会把所有内容都放在一个列表中，但是(与 Bootstrap 不同)Foundation 中没有用于下拉列表的列表分隔符。

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown 1</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
      <li><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown 2</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
      <li><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown 3</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

Answer 1

随着visibility classes您可以为每种尺寸创建单独的 nav。这是“官方”方式(查看文档页面源代码)