Tabs 具体化选项卡而不是滚动

我正在使用Materialize v0.98.0（本地副本），并具有以下代码。我在Chrome控制台中使用了CSS设置，但似乎无法理解

<link type="text/css" rel="stylesheet" href="../_css/materialize.css"  media="screen,projection,print"/>
<script type="text/javascript" src="../_js/materialize.js"></script>

#roll_tabs {
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

<div class="row">
    <div class="col s12">
        <ul class="tabs" id="roll_tabs">
            <li class="tab col"><a href="#EX-33-04-01">EX-33-04-01</a></li>
            <li class="tab col"><a href="#EX-33-05">EX-33-05</a></li>
            <li class="tab col"><a href="#EX-33-06">EX-33-06</a></li>
            <li class="tab col"><a href="#EX-33-07">EX-33-07</a></li>
            <li class="tab col"><a href="#FS-040">FS-040</a></li>
            <li class="tab col"><a href="#EX-33-01" class="">EX-33-01</a></li>
            <li class="tab col"><a href="#CL-400">CL-400</a></li>
            <li class="tab col"><a href="#EX-34-01">EX-34-01</a></li>
            <li class="tab col"><a href="#FS-PA-01-9" class="">FS-PA-01-9</a></li>
            <li class="tab col"><a href="#FS-PA-02-17">FS-PA-02-17</a></li>
            <li class="tab col"><a href="#EX-33-02">EX-33-02</a></li>
            <li class="tab col"><a href="#FS-SOL-01">FS-SOL-01</a></li>
            <li class="tab col"><a href="#Ex-33-03">Ex-33-03</a></li>
            <li class="tab col"><a href="#EX-34-02" class="active">EX-34-02</a></li>
            <li class="tab col"><a href="#EX-33-04-02" class="">EX-33-04-02</a></li>              
        </ul>
        <br>
    </div>
</div>

$(document).ready(function() {
    $('.tabs').tabs({
        onShow: function(event, ui) {
        formID = $('ul.tabs li a.active').html();
        }
    });
});

#滚动标签{
webkit盒阴影：0 2px 2px 0 rgba（0,0,0,0.14），0 3px 1px-2px rgba（0,0,0,0.12），0 1px 5px 0 rgba（0,0,0,0.2）；
盒影：0.2px2px0 rgba（0,0,0,0.14），0.3px1px-2pxRGBA（0,0,0,0.12），0.1px5px0 rgba（0,0,0,0.2）；
}



















$（文档）.ready（函数（）{
$（'.tabs'）.tabs({
onShow：函数（事件、用户界面）{
formID=$（'ul.tabs li a.active'）.html（）；
}
});
});

使用

swipeable:true

可以实现滚动（更准确地说，是滑动而不是滚动）。您使用了一个

col

的

类

，它不是那样工作的，您还需要给出网格的大小

并使用最新版本的materialize cdnjs/minified脚本-

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

---

我遇到的问题是，我有大量的选项卡，它们不适合外部分区。Materialize应该自动使选项卡可滚动（而不是可滑动），以便您可以查看隐藏的选项卡。相反，它只是将它们转移到下一行并隐藏起来。