マテリアライズCSSSタブ - 4つ以上のタブを表示しない

マテリアライズCSSが提供するJavascriptタブで作業しようとしています。何らかの理由で私のブラウザは最初の4つのタブしか表示しません。私は、ブラウザの幅を小さくすると、余分なタブ（タブ5、タブ6など）も表示されることを発見しました。これは、SafariとFireFoxの両方のケースです。私はそれが非常に奇妙な問題だと思うし、誰でもここでなぜこれが起こるのか説明できますか？以下のコードは次のとおりです。MaterializeCSSからマテリアライズCSSSタブ - 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>

：事前に http://materializecss.com/tabs.html

ありがとう！

出典

2017-07-17 ChartProblems

マテリアライズCssで使用されている鳥型システムのためだと思います。 class = "col s3"は大きなデバイスで25％幅を使用します。 ulにclass = "col s3"を持つliが5つ以上あります。 100％幅を横切ります。5番目のタブは次の行に移動します。高さを上げると、ulのタブクラスの高さが小さいため、次の行の5番目のタブが表示されます。

あなたは、最大幅でブラウザ画面を縮小：992px .tabsクラス、それはすべてのtabs.ThisがマテリアライズCSSによって適用される示して曲げるとプロパティを表示するため

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

。

ほんの少しのことを理解するのに役立ちます。

出典

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

マテリアライズCSSSタブ - 4つ以上のタブを表示しない

答えて

関連する問題