语义 UI 卡可堆叠变体

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且具有多种不同的元素可用于使您的网站看起来更加惊人和响应迅速。语义 UI 将单词和类视为可交换的概念。

语义 UI Card 元素以类似于使用语义 UI 类的扑克牌的方式显示站点内容。语义 UI 提供了多种卡片变体，如流体卡片、居中卡片、凸起卡片、链接卡片、浮动内容、文本对齐、彩色、列数、可堆叠、加倍。在本文中，我们将讨论语义 UI 卡片的可堆叠变体。

Semantic UI Card Variations stackable Card Group Variant 使卡片组以单列布局排列，即如果窗口宽度小于阈值（即 766 像素），则一个接一个地堆叠。我们使用语义 UI 的“可堆叠”类来创建可堆叠的卡片组变体。

Semantic-UI Card Variations Stackable Card Group Variant 类：

• stackable：该类用于在窗口宽度越过宽度小于 766px 的断点时强制卡片组为单列布局。到达移动断点后，网格可以将其列堆叠在一起。

句法：

示例 1：以下示例演示语义 UI 卡组的可堆叠变体。当接近断点大小时，我们可以观察到列数减少到一。

HTML

  

    
    
    
          
    
  
    

  

    
GeeksforGeeks
  
    Semantic UI card stackable Variation
    

    

        

            

                
            
        
  
        

            

                
            
        
  
        

            

                
            
        
        

            

                
            
        
  
        

            

                
            
        
    

  

输出：

输出

示例 2：以下示例演示了具有不同列长度的各种卡片组，所有卡片都减少为单列布局。

HTML

  

    
    
    
    
    

  

    
GeeksforGeeks
    Semantic UI card stackable Variation
    

    

        

            

                
Card 1
            
        
  
        

            

                
Card 2
            
        
  
        

            

                
Card 3
            
        
  
        

            

                
Card 4
            
        
        

            

                
Card 5
            
        
        

            

                
Card 6
            
        
    
    

        

            

                
Card 1
            
        
  
        

            

                
Card 2
            
        
  
        

            

                
Card 3
            
        
    
    

        

            

                
Card 1
            
        
  
        

            

                
Card 2
            
        
  
        

            

                
Card 3
            
        
  
        

            

                
Card 4
            
        
    

  

输出：

输出

参考： https://semantic-ui.com/views/card.html#stackable