徽章未在引导程序中正确加载[关闭]

Question

我的 index.html 没有在任何浏览器上正确显示徽章。它没有在彩色圆圈中显示数字。它只是显示它好像没有正确加载 CSS。

我从 bootstrap 和 jquery 尝试了本地和 CDN 路径，但问题没有解决。

<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<div class="alert alert-danger" >
  <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a>
  File is deleted!
</div>	

<a href="#">Messages <span class="badge">5</span> </a>

我希望它显示文本“消息”，然后显示带有文本“5”的彩色圆圈。

Answer 1

试试这个解决方案

<!DOCTYPE html>
<html>




<body>
    <html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>



    </head>

    <body>

        <div class="alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a>File is deleted!
        </div>

        <a href="#">Messages <span class="badge badge-pill badge-dark">5</span> </a>


    </body>

    </html>

</body>

</html>

Answer 2

您正在使用引导程序 4

只需将 span 类更改为 (badge badge-secondary)

<a href="#">Messages <span class="badge badge-secondary">5</span> </a>

Answer 3

请参阅此 bootstrap 文档： Bootstrap 4

徽章颜色变化：

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

要使徽章圆形添加类徽章丸

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Answer 4

缺少颜色类，例如

<span class="badge badge-primary">5</span>

<link rel="stylesheet"   href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
    
<div class="alert alert-danger" >
  <a href="#" class="close" data-dismiss="alert" aria-level="close">&times;</a> File is deleted!
</div>	
<a href="#">Messages <span class="badge badge-primary rounded-circle">5</span></a>

另外，对于圆形效果，使用.rounded-circle 引导类，它设置border-radius: 50%; css 属性。