📜  如何使用 Bootstrap 4 对齐嵌套表单行?

📅  最后修改于: 2021-10-29 06:25:39             🧑  作者: Mango

Bootstrap是一个用于设计网页的 CSS 框架。 Bootstrap 连同 HTML 和 JavaScript 导致交互式网页设计。最新版本是 Bootstrap v4.5。 Bootstrap 具有多种组件和实用程序。 Bootstrap 组件包括表单组件。 Bootstrap 有一个内置的表单控件类,用于创建表单和相应的表单输入字段。 Bootstrap 表单组件允许使用嵌套行创建表单。行和列是 Bootstrap 中的另一个实用程序,可用于对齐嵌套表单行。

在本文中,我们将看到两个对齐嵌套表单行的示例,其中一个使用表单组类,而另一个示例使用行和列的概念仅显示所需的结构。

示例 1:在此示例中,定义了由嵌套表单行组成的主容器。在容器内,定义了一个表单组行类,其宽度为 7 个单位的列。该列再次由包含两列的表单组行组成。第一列用于指定输入字段的标签,第二列用于定义输入字段。

由于列宽已定义,因此表单标签和输入字段不会超过列大小,因此保持对齐。通过将按钮放置在嵌套行的第二列并保持第一列空置,按钮与表单的输入字段对齐。

代码实现:

HTML


  

    
    
  
    
    
      
    

  

    
        
            
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                    
                    
                                             
                
            
        
    
  


HTML


  

  
    
    
  
    
    
      
    

  

    
        
            
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                    
                    
                                                                      
                
            
        
    
  


输出:

示例 2:在此示例中,定义了由嵌套行组成的主容器。在容器内,定义了一个行类,它有一个宽度为 7 个单位的列。该列再次由包含两列的行组成。第一列用于指定输入字段的标签,第二列用于定义输入字段。由于列宽已定义,因此表单标签和输入字段不会超过列大小,因此保持对齐。最后,一个按钮被放置在与表单的输入字段正确对齐的位置。它类似于第一种方法,只是我们不使用表单组类。

代码实现:

HTML



  

  
    
    
  
    
    
      
    

  

    
        
            
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                                         
                                             
                
                
                    
                    
                                                                      
                
            
        
    
  

输出: