如果有多个选项卡而不是容器的宽度可以包含而不滚动，那么如何使MaterialiseCSS选项卡可滚动

Question

下面给出了一个示例代码（SSCCE）来演示我的问题。我的问题是MaterialiseCSS前端框架的文档说：

  

可滚动标签标签自动变为可滚动

Source

但是当我实际尝试使用更多标签而不是屏幕宽度（或父级）可以包含而不滚动时，它不起作用。标签不会变成可滚动。

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

这是他们在指南中展示的内容：

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

＆＃13;

＆＃13;

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

＆＃13;

.row {
    background-color: wheat;
}

ul {
  background-color: cyan;
}

li {
background-color: pink;
}

html, body {
  overflow-x: hidden;
}

＆＃13;

<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-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查出来......经过3次更改后它才有效......

＆＃13;

＆＃13;

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

＆＃13;

.row {
    background-color: wheat;
}

ul {
  background-color: cyan;
}

li {
background-color: pink;
}

html, body {
  overflow-x: hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我终于通过将这个添加到我的主 style.css 中解决了这个问题

.tabs {
     display: flex !important
}