如何在Bootstrap中配置模式宽度？

Bootstrap Modal：这是一个对话框窗口，在触发某些事件时会在浏览器窗口内打开。根据要求，这是一种真正方便的方法来改进网站的内容呈现。
在本文中，我们将重点介绍调整模式框的宽度/高度。

方法1：使用预定义的Bootstrap类
Bootstrap具有用于更改模式尺寸属性的预定义类，这些属性可与包含.modal-dialog的div元素一起使用。这些在下面列出：

• 小型模式：。模态
• 中型模式：。模态
• 大型模态：。模态lg

  

    
    
    
    
  
    
  

  

    
        Small Modal
        Other classes mentioned above are also 
          implemented in the same manner.
        
          Open Small-modal
      
        
        
            
                
                
                    
                        
                          ×
                        
                          GeeksforGeeks
                      
                    
                    
                        GeeksforGeeks - A computer
                          science portal for geeks
                    
                    
                        
                          Close
                      
                    
                
            
        
    

  

输出：

方法2：通过篡改默认CSS样式来使用自定义尺寸
我们还可以通过更改包含.modal-dialog类的div的CSS属性来自定义模态的宽度/高度。下面是相同的解决方案。
解决方案：

  

    
    
    
    
  
    
  
    
        .custom {
            width: 600px;
            min-height: 400px;
        }
    

  

  
    
        Custom-sized Modal
        We are changing CSS properties of div 
          containing the '.modal-dialog' to do the same.
  
        
          Open Custom-sized modal
      
  
        
        
            
                
                
                    
                        
                          ×
                      
                        
                          GeeksforGeeks
                      
                    
                    
                        GeeksforGeeks - 
                          A computer science portal for geeks
                    
                
            
        
    

  

输出：