Bootstarp未读消息铃铛

971 阅读1分钟

Thymeleaf版:

   <li>
       <a title="消息" class="fa fa-bell">
       <th:block th:if="${msgNumber >0}">
       <label class="label label-danger" style="right:0px">[[${msgNumber}]]</label>
       </th:block>
       </a>
   </li>

纯html版:

 <li>
     <a title="消息" class="fa fa-bell">
          <label class="label label-danger" style="right:0px">12</label>
     </a>
 </li>

 效果

image.png

style="right:0px"

不要去掉 否则消息数量的样式会居中