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

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

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

谢谢！

来源

2017-07-17 ChartProblems

我认为这是由于物化Css中使用的网格系统。 class =“col s3”在大型设备中使用25％的宽度。你在ul中有更多的五级，class =“col s3”。跨越100％的宽度。第五个标签在下一行移动，因为它是不可见的，因为如果你增加高度，你可以在下一行看到第五个标签，因此ul中标签类的高度很小。

当您减少浏览器屏幕的最大宽度：992px .tabs类

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

由于显示财产弯曲并显示所有tabs.This由Materialise的CSS应用。

希望它能帮助你理解一点点。

来源

2017-07-17 21:47:44 Saurabh

我做了一些调查，发现媒体从物化查询是您看到的行为背后的原因。

目前媒体查询删除标签的flex属性992px。我简单地将它扩展到我的屏幕/设备宽度如下。

@media (max-width: 1900px) { 

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

下面我已经在jsbin上复制了一个工作示例。

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

希望这有助于。

来源

2017-07-17 21:26:46 skippy

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

回答

相关问题