如何更改引导药丸徽章的大小？

给定一个带有药丸徽章的 HTML 文档（如果你不知道什么是药丸徽章，请参考这个），任务是增加徽章的大小。可以有三种方法来做到这一点。这些方法讨论如下：-

方法 1：使用内联样式：您可以简单地向 span 标签添加一个 style 属性，该标签将 Badge-pill 作为一个类，并根据您的意愿更改字体大小。

例子：

  

    

  

    

        Size of Pill badge Simple 
        Bootstrap Code
    
      
     
    
      
    

        Size of Pill badge after 
        using Approach 1st 
    
      
     
    

  

输出：

方法二：在heading标签中嵌入badge：我们也可以将badge的span标签包裹在不同的heading标签中，以达到想要的效果。

例子：

  

    

  

  
    

  
        

            Size of Pill badge Simple 
            Bootstrap Code
        
          
         
          
        

            Different Sizes of Pill badge 
            after using Approach 2nd 
        
          
        
h1 tag
        
 
        
          
        
h2 tag
        
 
        
          
        
h3 tag
        
 
        
          
        
h4 tag
        
 
        
          
        
h5 tag
        
 
        
          
        
h6 tag
        
 
        
    

  

输出：

方法 3：通过使用内部/外部 CSS 覆盖类：我们还可以为徽章添加我们自己的自定义类名，并且在 CSS 文件中，我们可以更新 font-size 属性以获得所需的结果。

例子：

  

    
  
    

  

    

  
        

            Size of Pill badge Simple 
            Bootstrap Code
        
          
         
        
          
        

            Size of Pill badge after 
            using Approach 3nd 
        
          
        
             
    

  

输出：