1
を使用して、私はmaterializecssを使用していると私は彼らのウェブサイト上の例としてCollapsiblesでバッジを使用したい：http://materializecss.com/badges.htmlレッドバッジmaterializecss
唯一の違いは、私は赤いバッジを使用したいと私は追加しているということです class = "new badge 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>
正しく赤いバッジを表示する修正があります：ここでのコードはありますか？