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個選項卡

回答

相關問題