Question

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

ex：https://jsfiddle.net/pv860zh0/'rider alerts'和'translate - english'按钮转到下一行。如果您进一步调整大小，其他类别也会转到下一行。

  <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();

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

物化导航栏/按钮无响应

1 个答案: