我正在使用materializecss，我想在其网站上使用可折叠中的徽章作为示例：http://materializecss.com/badges.html
唯一的区别是我想使用红色徽章并且我要添加 class =＆＃34;新徽章红色＆＃34;但似乎可折叠头部正在制动对齐。这是代码：
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>
是否有正确显示红色徽章的修复程序？
答案 0 :(得分：0)