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。这是“官方”方式（查看文档页面源代码）

为什么Foundation topbar没有响应？

1 个答案: