Semantic-UI Step Unstackable 变体

语义用户界面 是一个使用 CSS 和 jQuery 构建出色用户界面的开源框架。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它由预先构建的语义组件组成，借助这些组件可以创建漂亮且响应迅速的布局。

一个步骤显示了一系列活动中一个活动的完成状态。它是帮助用户跟踪他/她的活动的重要组件。例如：如果您从应用程序订购商品，则该应用程序会向您显示从下单到成功交付的订单完成状态。借助 Semantic-UI 中的Steps可以实现同样的目的。

有时我们必须以某种方式创建一个步骤，使其必须是水平的，即即使在移动视图中，这些步骤也不应该堆叠在一起。这个期望的结果可以通过 Semantic-UI 框架中的Step Unstackable Variation来实现，该框架不允许步骤相互堆叠。

Semantic-UI Step Unstackable Variation 类：

• unstackable：此类用于使步骤不可堆叠，应在父级上使用。这意味着这些步骤不会相互堆叠并位于彼此旁边。

句法：

    ...

现在让我们看一下我们将使用 Step Unstackable Variation 的几个示例。

示例 1：

HTML

  

    
    
    

  

    
    
      GeeksforGeeks
    
  
    
      Step Stackable Variation
    
  
    
    
        
            
            
                
                    Transporting
                
                
                    Will Reach In 2 Days
                
            
        
  
        
            
            
                
                    Delivered
                
                
                    Package Successfully Delivered
                
            
        
  
        
            
            
                
                    Feedback
                
                
                    Please Do Give A Feedback
                
            
        
    
  
    
      Step Unstackable Variation
    
  
    
    
        
            
            
                
                    Transporting
                
                
                    Will Reach In 2 Days
                
            
        
  
        
            
            
                
                    Delivered
                
                
                    Package Successfully Delivered
                
            
        
  
        
            
            
                
                    Feedback
                
                
                    Please Do Give A Feedback
                
            
        
    

  

输出：

示例 2：

HTML

  

    
    
    

  

    
    
        GeeksforGeeks
    
    
        Step Stackable Variation
    
  
    
        
  
        
            
            
                
                    Payment
                
                
                    Payment Accepted
                
            
        
  
        
            
            
                
                    Chef
                
                
                    Food Prepared
                
            
        
  
        
            
            
                
                    Order Delivered
                
                
                    Enjoy Your Meal
                
            
        
    
  
  
    
        Step Unstackable Variation
    
  
    
  
    
        
            
            
                
                    Payment
                
                
                    Payment Accepted
                
            
        
  
        
            
            
                
                    Chef
                
                
                    Food Prepared
                
            
        
  
        
            
            
                
                    Order Delivered
                
                
                    Enjoy Your Meal
                
            
        
    

  

输出：

参考： https://semantic-ui.com/elements/step.html