实现导航栏/按钮无响应

Question

每当我尝试调整窗口大小时，导航栏似乎都没有响应。相反，组件转到下一行。如何使导航栏变大/变小，以便在调整大小时可以容纳所有内容？

例如：https://jsfiddle.net/pv860zh0/“骑手警报”和“翻译 - 英语”按钮转到下一行。如果您进一步调整大小，其他类别也会转到下一行。

  <li><a class="dropdown-button" href="#!" data-activates="ridingdd">Riding TheBus<i class="material-icons right"></i></a></li>
  <li><a class="dropdown-button" href="#!" data-activates="programsdd">Programs<i class="material-icons right"></i></a></li>
  <li><a class="dropdown-button" href="#!" data-activates="csdd">Customer Service<i class="material-icons right"></i></a></li>
  <li><a class="dropdown-button" href="#!" data-activates="visitorsdd">Visitors<i class="material-icons right"></i></a></li>
  <li><a class="dropdown-button" href="#!" data-activates="aboutdd">About<i class="material-icons right"></i></a></li>
  <li>  <a class='dropdown-button btn red darken-3' href='#' data-activates='radd'>Rider Alerts</a></li>
  <li>  <a class='dropdown-button btn blue darken-3' href='#' data-activates='tdd'>Translate - English</a></li>

也许它可能来自按钮？如果是这样，我将如何使这些按钮响应？

Answer 1

如物化documentation:

<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse">
      <i class="material-icons">menu</i>
    </a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">Javascript</a></li>
      <li><a href="mobile.html">Mobile</a></li>
    </ul>
  </div>
</nav>

另外，在你的 jquery 中包含 document.ready():

$(".button-collapse").sideNav();

这将在中型和更大尺寸的屏幕上创建一个带有常规菜单的导航栏，并在较小尺寸的屏幕上创建一个折叠菜单。