如何在Bootstrap 4中设置水平对齐的手风琴？

垂直手风琴在Web开发中非常流行，但是在少数情况下需要水平手风琴，因此在本文中我们将使用指针事件。我们将采用书写模式来更改手风琴标题视图。并使用变换旋转整个手风琴。

下面的程序说明了上述方法：
程序：

  

    Horizontal Acordion
    
    
    
    
    
    
    
    
    
        .accordion {
            text-align: center;
        }
          
        .accordion.width {
            display: flex;
            width: 200px;
        }
          
        .accordion.width .card {
            flex-direction: row;
            min-width: min-content;
        }
          
        .accordion.width .card .card-header {
            cursor: pointer;
            transform: rotate(180deg);
            writing-mode: vertical-rl;
            background-color: #0F9D58;
            border: 2px solid black;
        }
          
        .card-body {
            width: 200px;
            background-color: ;
        }
          
        .collapsing.width {
            transition: width 0.5s ease;
            height: auto;
            width: 10px;
        }
          
        h1 {
            color: green;
        }
    

  

    
  
        
        GeeksforGeeks
        A Computer Science Portal for Geeks
        A Horizontal Acordion
        
  
            
            
                
                    Accordion Slide 1
                
                
                    
                        If you like GeeksforGeeks and would like
                      to contribute you can also write an article 
                      using contribute.geeksforgeeks.org
                    
                
            
            
                
                    Accordion Slide 2
                
                
                    
                        If you like GeeksforGeeks and would like
                      to contribute you can also write an article 
                      using contribute.geeksforgeeks.org
                    
                
                
                    
                        Accordion Slide 3
                    
                    
                        
                            If you like GeeksforGeeks and would like
                          to contribute you can also write an article
                          using contribute.geeksforgeeks.org
                        
                    
                
                
                    var horizontalAccordions = $(".accordion.width");
  
                    horizontalAccordions.each(function() {
                        var accordion = $(this);
                        var collapse = accordion.find(".collapse");
                        var bodies = collapse.find("> *");
                        accordion.height(accordion.height());
                        bodies.width(bodies.eq(0).width());
                        collapse.not(".show").each(function() {
                            $(this).parent().find("[data-toggle='collapse']")
                                .addClass("collapsed");
                        });
                    });
                
          
      
    

  
  

输出：

• 单击手风琴之前：
  
• 单击手风琴后：