导航栏启动时，最右边的TAB消失（材料化1.0.0）

时间：2019-01-22 16:55:12

标签： javascript html materialize

当我使用4个以上的标签（0-4）时，在放大屏幕时，弹出导航栏时，最右边的tab4消失。

我在网上搜索了相同的问题，但找不到任何问题。

这是我第一次使用带有导航菜单的TABS。 我已经在这里发布了代码。请有人帮我解决这个问题吗？

<!doctype html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

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

<header class="main-page">
  <div class="navbar-fixed">
    <nav class="indigo lighten-2">
      <div class="nav-wrapper">
        <ul>
        <!-- Only needed in record form -->
        <li><a href="#" id="btnBack" onclick="HAS_Back()"><i class="white-text small material-icons">arrow_back</i></a></li>
        </ul>
        <!-- Put a "hamburger" menu when the web page gets too narrow -->
		<a href="#" id="mainmenu" data-target="slide-out" class="sidenav-trigger"><i class="small material-icons">menu</i></a>
		<!-- This attribute will be filled in the initPage() of each called page -->
		<a href="#!" id="selectedmenu" class="brand-logo center">Selected Menu</a>
        <ul style="heigth:40px;" class="right">
          <!-- The specific page has to remove the not needed button -->
		  <li><a href="#" ><i class="white-text small material-icons">refresh</i></a></li>
          <li><a href="#" ><i class="white-text small material-icons">done</i></a></li>
          <li><a href="#" ><i class="white-text material-icons">add</i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- Main menu -->
  <ul  style="width:200px;"id="slide-out" class="sidenav sidenav-fixed grey darken-2">
    <li><a href="#" class="white-text">Menu1</a></li>
    <li><a href="#" class="white-text">Menu2</a></li>
    <li class="no-padding">
       <ul class="collapsible">
         <li>
           <a class="white-text collapsible-header">Menu3</a>
           <div class="collapsible-body grey darken-2">
             <ul>
              <li><a href="#" class="white-text">Menu3-1</a></li>
              <li><a href="#" class="white-text">Menu3-2</a></li>
             </ul>
           </div>
         </li>
       </ul>
    </li>
   </ul>
</header>

<main>
<div class="container">	
  <div class= "col s12 m8 offset-m1 xl7 offset-xl1">

  <!-- Record actions -->
  <ul id="actions" class="dropdown-content">
    <li><a href="#" id="editrecord" class="black-text">Edit</a></li>
    <li><a href="#" id="deleterecord" class="black-text">Delete</a></li>
  </ul>
  <!-- define the TABS -->
  <div class='row'>
	<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
      <ul class='tabs'>
        <li class='tab col s3'><a href='#tab0' id='0'>tab0</a></li>
        <li class='tab col s3'><a href='#tab1' id='1'>tab1</a></li>
        <li class='tab col s3'><a href='#tab2' id='2'>tab2</a></li>
	    <li class='tab col s3'><a href='#tab3' id='3'>tab3</a></li>
        <li class='tab col s3'><a href='#tab4' id='3'>tab4</a></li>
      </ul>
    </div>
  </div>
</div>	

<div class="container">
<!-- TAB content -->
<div id='tab0' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
      <tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
	    <td>Row 1, column 1</td>
	    <td>Row 1, column 2</td>
	    <td>Row 1, column 3</td>
      </tr>
      <tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 2, column 1</td>
        <td>Row 2, column 2</td>
        <td>Row 2, column 3</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- TAB content -->			  
<div id='tab1' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="3" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 3, column 1</td>
        <td>Row 3, column 2</td>
        <td>Row 3, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

<!-- TAB content -->
<div id='tab2' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
      <tr id="4" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
	    <td>Row 4, column 1</td>
	    <td>Row 4, column 2</td>
	    <td>Row 4, column 3</td>
      </tr>
      <tr id="5" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 5, column 1</td>
        <td>Row 5, column 2</td>
        <td>Row 5, column 3</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- TAB content -->			  
 <div id='tab3' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="6" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 6, column 1</td>
        <td>Row 6, column 2</td>
        <td>Row 6, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

<!-- TAB content -->			  
 <div id='tab4' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="7" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 7, column 1</td>
        <td>Row 7, column 2</td>
        <td>Row 7, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

   <!-- empty table with body is needed to let the dropdon buttons work in a tab -->
<table>
  <tbody>
	  <tr class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions"/>
    </tbody>
</table>
   </div>
   </main>

<script>
M.AutoInit();
 var instance = M.Tabs.init(el, options);
</script>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

问题与实现网格规则有关。列的总和应为12，但您的<li>类有5个col s3。

<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
   <ul class='tabs'>
      <li class='tab col s3'><a href='#tab0' id='0'>tab0</a></li>
      <li class='tab col s3'><a href='#tab1' id='1'>tab1</a></li>
      <li class='tab col s3'><a href='#tab2' id='2'>tab2</a></li>
      <li class='tab col s3'><a href='#tab3' id='3'>tab3</a></li>
      <li class='tab col s3'><a href='#tab4' id='3'>tab4</a></li>
   </ul>
</div>

您可以再次设置它们，例如将s3替换为s2。

此外，您可以消除所有col s3类，以便自动物化网格系统设置的列大小。 

<!doctype html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

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

<header class="main-page">
  <div class="navbar-fixed">
    <nav class="indigo lighten-2">
      <div class="nav-wrapper">
        <ul>
        <!-- Only needed in record form -->
        <li><a href="#" id="btnBack" onclick="HAS_Back()"><i class="white-text small material-icons">arrow_back</i></a></li>
        </ul>
        <!-- Put a "hamburger" menu when the web page gets too narrow -->
		<a href="#" id="mainmenu" data-target="slide-out" class="sidenav-trigger"><i class="small material-icons">menu</i></a>
		<!-- This attribute will be filled in the initPage() of each called page -->
		<a href="#!" id="selectedmenu" class="brand-logo center">Selected Menu</a>
        <ul style="heigth:40px;" class="right">
          <!-- The specific page has to remove the not needed button -->
		  <li><a href="#" ><i class="white-text small material-icons">refresh</i></a></li>
          <li><a href="#" ><i class="white-text small material-icons">done</i></a></li>
          <li><a href="#" ><i class="white-text material-icons">add</i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- Main menu -->
  <ul  style="width:200px;"id="slide-out" class="sidenav sidenav-fixed grey darken-2">
    <li><a href="#" class="white-text">Menu1</a></li>
    <li><a href="#" class="white-text">Menu2</a></li>
    <li class="no-padding">
       <ul class="collapsible">
         <li>
           <a class="white-text collapsible-header">Menu3</a>
           <div class="collapsible-body grey darken-2">
             <ul>
              <li><a href="#" class="white-text">Menu3-1</a></li>
              <li><a href="#" class="white-text">Menu3-2</a></li>
             </ul>
           </div>
         </li>
       </ul>
    </li>
   </ul>
</header>

<main>
<div class="container">	
  <div class= "col s12 m8 offset-m1 xl7 offset-xl1">

  <!-- Record actions -->
  <ul id="actions" class="dropdown-content">
    <li><a href="#" id="editrecord" class="black-text">Edit</a></li>
    <li><a href="#" id="deleterecord" class="black-text">Delete</a></li>
  </ul>
  <!-- define the TABS -->
  <div class='row'>
	<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
      <ul class='tabs'>
        <li class='tab'><a href='#tab0' id='0'>tab0</a></li>
        <li class='tab'><a href='#tab1' id='1'>tab1</a></li>
        <li class='tab'><a href='#tab2' id='2'>tab2</a></li>
	    <li class='tab'><a href='#tab3' id='3'>tab3</a></li>
        <li class='tab'><a href='#tab4' id='3'>tab4</a></li>
      </ul>
    </div>
  </div>
</div>	

<div class="container">
<!-- TAB content -->
<div id='tab0' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
      <tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
	    <td>Row 1, column 1</td>
	    <td>Row 1, column 2</td>
	    <td>Row 1, column 3</td>
      </tr>
      <tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 2, column 1</td>
        <td>Row 2, column 2</td>
        <td>Row 2, column 3</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- TAB content -->			  
<div id='tab1' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="3" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 3, column 1</td>
        <td>Row 3, column 2</td>
        <td>Row 3, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

<!-- TAB content -->
<div id='tab2' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
      <tr id="4" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
	    <td>Row 4, column 1</td>
	    <td>Row 4, column 2</td>
	    <td>Row 4, column 3</td>
      </tr>
      <tr id="5" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 5, column 1</td>
        <td>Row 5, column 2</td>
        <td>Row 5, column 3</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- TAB content -->			  
 <div id='tab3' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="6" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 6, column 1</td>
        <td>Row 6, column 2</td>
        <td>Row 6, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

<!-- TAB content -->			  
 <div id='tab4' class='col s12 m6 l3 center-align'> 
  <table class="bordered">
	<thead class='t-h'>
	  <tr class="tr-h" >
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody class='t-body'>
	  <tr id="7" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
        <td>Row 7, column 1</td>
        <td>Row 7, column 2</td>
        <td>Row 7, column 3</td>
      </tr>
	</tbody>
  </table>
</div>

   <!-- empty table with body is needed to let the dropdon buttons work in a tab -->
<table>
  <tbody>
	  <tr class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions"/>
    </tbody>
</table>
   </div>
   </main>

<script>
$(document).ready(function(){
$('.tabs').tabs();
  });
</script>
</body>

</html>

相关问题
最新问题