Question

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

我尝试了引导和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>

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

Answer 1

缺少颜色类别，例如

<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 bootstrap类，该类设置border-radius: 50%; css属性。

Answer 2

您正在使用引导程序4

只需将span类更改为（徽章badge-secondary）

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

Answer 3

请参阅以下引导文档： 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

尝试此解决方案

<!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>

徽章无法在引导程序中正确加载

4 个答案: