我一直在尝试使用 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>
来自 MaterialiseCSS: http://materializecss.com/tabs.html
提前致谢!
最佳答案
I think it is due to gird system used in Materialize Css. class="col s3" use 25% width in big devices. You have more then five li with class="col s3" in ul. Cross 100% width.The fifth tab is move in next row it is not visible because height of tabs class in ul is small if you increase height you will able to see fifth tab in next row.
When you reduce browser screen at max-width: 992px .tabs class
.tabs {
display:-webkit-flex;
display: -ms-flexbox;
display: flex
}
由于显示属性为 flex，它会显示所有选项卡。这是由 Materialise CSS 应用的。
希望它能帮助你理解一些。
关于javascript - MaterializeCSS 选项卡 - 不显示超过 4 个选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45153376/