我正在使用materializecss，我想使用Collapsibles中的徽章作为其网站上的示例:http://materializecss.com/badges.html
唯一的区别是我想使用红色徽章并且我正在添加 class="new badged red"但似乎可折叠标题正在阻止对齐。这是代码:
https://jsbin.com/kumamalupu/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body class="grey lighten-2">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><span class="new badge red">4</span><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><span class="badge">1</span><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</body>
</html>
是否有修复程序可以正确显示红色徽章？
最佳答案
关于javascript - 使用 MaterializeCSS 的可折叠元素中的红色徽章，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41864791/