jquery - 当选项卡数量多于容器宽度可容纳且不滚动时，如何使 MaterializeCSS 选项卡可滚动

Question

下面给出了一个示例代码(SSCCE)来演示我的问题。我的问题是 MaterializeCSS 前端框架的文档说:

Scrollable Tabs Tabs automatically become scrollable

Source

但是当我实际尝试使用比屏幕宽度(或父级)可以包含的更多选项卡而不滚动时，它不起作用。选项卡不能滚动。

那么这个问题的解决方案或解决方法是什么？

这是他们在指南中显示的内容:

这是我按照他们的指南在本地服务器上编写测试时得到的结果(屏幕上仅显示 4 个选项卡，而总共 11 个选项卡 - 而且它们不可滚动):

$('ul.tabs').tabs();

.row {
    background-color: wheat;
}

ul {
  background-color: cyan;
}

li {
background-color: pink;
}

html, body {
  overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="row">
  <div class="col l12">
    <ul class="tabs">
      <li class="tab col l3"><a href="tabOne" class="active">Tab 1</a></li>
      <li class="tab col l3"><a href="tabTwo" class="disabled">Tab 2 Disabled</a></li>
      <li class="tab col l3"><a href="tabThree" class="">Tab 3</a></li>
      <li class="tab col l3"><a href="tabFour" class="">Tab 4</a></li>
      <li class="tab col l3"><a href="tabFive" class="">Tab 5</a></li>
      <li class="tab col l3"><a href="tabSix" class="disabled">Disabled Tab 6</a></li>
      <li class="tab col l3"><a href="tabSeven" class="">Tab 7</a></li>
      <li class="tab col l3"><a href="tab Eight" class="">Tab 8</a></li>
      <li class="tab col l3"><a href="tab Nine" class="">Tab 9</a></li>
      <li class="tab col l3"><a href="tab Ten" class="">Tab 10</a></li>
      <li class="tab col l3"><a href="tab Eleven" class="">Tab 11</a></li>
    </ul>
  </div>


</div>
<!--.row-->

Answer 1

看看这个......经过 3 次更改后它可以工作......

$(document).ready(function(){
    $('ul.tabs').tabs();
  });

.row {
    background-color: wheat;
}

ul {
  background-color: cyan;
}

li {
background-color: pink;
}

html, body {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col l3"><a href="tabOne" class="active">Tab 1</a></li>
      <li class="tab col l3"><a href="tabTwo" class="disabled">Tab 2 Disabled</a></li>
      <li class="tab col l3"><a href="tabThree" class="">Tab 3</a></li>
      <li class="tab col l3"><a href="tabFour" class="">Tab 4</a></li>
      <li class="tab col l3"><a href="tabFive" class="">Tab 5</a></li>
      <li class="tab col l3"><a href="tabSix" class="disabled">Disabled Tab 6</a></li>
      <li class="tab col l3"><a href="tabSeven" class="">Tab 7</a></li>
      <li class="tab col l3"><a href="tab Eight" class="">Tab 8</a></li>
      <li class="tab col l3"><a href="tab Nine" class="">Tab 9</a></li>
      <li class="tab col l3"><a href="tab Ten" class="">Tab 10</a></li>
      <li class="tab col l3"><a href="tab Eleven" class="">Tab 11</a></li>
    </ul>
  </div>


</div>