如何停止提交按钮与文本区域一起扩展？

下面是遇到的问题的示例。这里的按钮标签包括“ form-control”类。表单控件类将合并它的所有元素对齐。该按钮也不例外，因此与文本区域对齐或弯曲。

    
        
        
    
    
        

            

                

                                      
                    
                      Submit
                
            
        
    

输出

Bootstrap 4是Web开发人员用来创建动态和交互式用户界面的最流行的CSS框架之一。 Bootstrap 4捆绑了各种组件，可用于构建引人入胜的网站。这样的组件之一就是用于创建表单设计的表单控件。表单控件类具有预定义的CSS属性，这使得在代码中直接使用这些组件变得更加容易，而无需为单个组件重写CSS属性。但是，将窗体控件类同时用于textarea和button会使按钮与文本区域一起扩展。

这些示例中使用的一些术语是：

• container：容器类填充其中的内容。这是一个响应固定宽度的补充器。
• mt-5： mt-5是一种实用程序或帮助程序类，用于将上边距设置为3rem，即字体大小的三倍。
• form-control： .form-control类已添加到所有文本输入，textarea和select元素。它具有全局属性，可保持表单元素的间距和对齐方式。
• form-inline： .form-inline类可确保元素为内联。
• btn： .btn类应该与Bootstrap 4 / li中的标记一起使用。
• btn-primary： .btn-primary提供蓝色按钮。
• mb-2： mb-2是一种实用程序或帮助程序类，用于将底部边距设置为0.5rem，即字体大小的0.5倍。

第一种方法：
可以考虑采用以下方法来防止按钮和文本区域一起扩展。引导程序cdn首先被导入。这允许用于具有Bootstrap样式表中定义的全局属性的组件。接下来，形成容器并定义行和列。该列包含文本区域以及按钮。在此示例中，按钮不包括表单控件类。结果，按钮被放置在文本区域下方。因此，即使文本区域与文本一起扩展，按钮的大小也完全保持不变。

例子：

    
        
        
    
    
        
        

            
            

                
                

                    
                                      
                    
                      Submit
                
                
            
            
        
        
    

输出

第二种方法：
在这种方法中，我们使用form-inline类，该类确保将textarea和button放在同一行上，而按钮的大小不受扩展的textarea的影响。引导程序cdn首先被导入。这允许用于具有Bootstrap样式表中定义的全局属性的组件。接下来，形成容器并定义表单。该表单包含textarea作为输入字段以及一个按钮。 button标签不包含表单控件类，因此不会随textarea一起变化。同样由于inline属性，该按钮位于textarea旁边。但是由于按钮是独立于文本区域的，因此即使文本区域的高度增加，按钮的大小也不会改变。
例子：

    
        
        
    
    
        
        

            
            

                

                    
                                      
                
                
                  Confirm
            
            
        
        
    

输出