MaterializeCSS 选项卡 - 不显示超过 4 个选项卡答案

【问题标题】：MaterializeCSS tabs - Not displaying more than 4 tabsMaterializeCSS 选项卡 - 不显示超过 4 个选项卡
【发布时间】：2017-07-17 20:44:58
【问题描述】：

我一直在尝试使用 Materialise CSS 提供的 Javascript 选项卡。出于某种原因，我的浏览器只会显示前 4 个选项卡。然后我发现如果我减小浏览器的宽度，额外的选项卡（选项卡 5、选项卡 6 等）也会变得可见。 Safari 和 FireFox 都是这种情况。我认为这是一个非常奇怪的问题，并且想知道这里的任何人都可以解释为什么会发生这种情况。下面是代码：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

  <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  </head>
  <body>

    <!-- Tabs -->
    <div class="row">
      <div class="col s12">
        <ul class="tabs">
          <li class="tab col s3"><a class="active" href="#test1">Tab 1</a></li>
          <li class="tab col s3"><a href="#test2">Tab 2</a></li>
          <li class="tab col s3"><a href="#test3">Tab 3</a></li>
          <li class="tab col s3"><a href="#test4">Tab 4</a></li>
          <li class="tab col s3"><a href="#test5">Tab 5</a></li>
        </ul>
      </div>
      <div id="test1" class="col s12">Test 1</div>
      <div id="test2" class="col s12">Test 2</div>
      <div id="test3" class="col s12">Test 3</div>
      <div id="test4" class="col s12">Test 2</div>
      <div id="test5" class="col s12">Test 3</div>
    </div>

    <!-- Init Tabs -->
        <script type="text/javascript">
        $(document).ready(function(){
            $('ul.tabs').tabs();
          });
        </script>


    <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
  </body>
  </html>

来自 MaterializeCSS： http://materializecss.com/tabs.html

提前致谢！

【问题讨论】：

标签： javascript materialize

【解决方案1】：

我认为这是由于 Materialise Css 中使用的网格系统。 class="col s3" 在大型设备中使用 25% 的宽度。你有超过 5 里 class="col s3" 在 ul。交叉 100% 宽度。第五个选项卡移入下一个行它是不可见的，因为 ul 中的选项卡类的高度很小，如果你增加高度，你将能够在下一行看到第五个标签。

当您以最大宽度缩小浏览器屏幕时：992px .tabs 类

 .tabs {
    display:-webkit-flex;
    display: -ms-flexbox;
    display: flex
}

由于显示属性为 flex，它显示所有选项卡。这是由 Materialize CSS 应用的。

希望对你有所了解。

【讨论】：

【解决方案2】：

我做了一些研究，发现来自 materialize 的媒体查询是您所看到的行为背后的原因。

目前媒体查询会移除 992px 的标签页的 flex 属性。我只是将它扩展到我的屏幕/设备宽度，如下所示。

@media (max-width: 1900px) {

  .tabs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

下面我复制了一个关于 jsbin 的工作示例。

http://jsbin.com/soxadeciyo/2/edit?output

希望这会有所帮助。

【讨论】：