布尔玛右对齐下拉

Bulma 是一个 CSS 框架，可以用作 Bootstrap 的替代品。它基于弹性盒。在本文中，我们将了解如何在 Bulma 中使下拉菜单右对齐。要使下拉右对齐，我们只需将is-right修饰符添加到下拉容器中。

Bulma 右对齐下拉类：

• is-right：这个类用于下拉容器，使下拉右对齐。

句法：

    ...

示例：下面的示例说明了如何在下拉容器上使用is-right修饰符来使 Bulma 中的下拉列表右对齐。

HTML

  

    
    
  
    
        .container > p {
            margin-top: 30px;
        }
    

  

    
        GeeksforGeeks
    
  
    
        Bulma Right ALigned Dropdown
    
      
    
        Default Dropdown:
  
        
            
                
                    Select a topic
                    
                        
                    
                
            
  
            
                
                    
                        Algorithms
                    
  
                    
                        DBMS
                    
  
                    
                        Data Structures
                    
                
            
        
  
        Right Aligned Dropdown:
  
        
            
                
                    Select a topic
                    
                        
                    
                
            
            
                
                    
                        Algorithms
                    
                    
                        DBMS
                    
                    
                        Data Structures
                    
                
            
        
    
    
        var triggers = document.querySelectorAll(
                ".dropdown .dropdown-trigger");
  
        triggers.forEach(function (trigger) {
            var isopen = false;
            trigger.addEventListener('click', function () {
                if (isopen) {
                    trigger.parentElement
                        .classList.remove("is-active");
  
                    isopen = false;
                } else {
                    trigger.parentElement
                        .classList.add("is-active");
                          
                    isopen = true;
                }
            })
        });
    

  

输出：

布尔玛右对齐下拉

参考： https://bulma.io/documentation/components/dropdown/#right-aligned