bootstrap表单label和input在一行显示

bootstrap表单中label和input在一行显示的几个示例，本文中使用的bootstrap版本都是4.4.1

1. 使用form-inline

    

        

            规格值：
            
            
            + 添加规格值
        
    

2. 使用栅格布局

注意：boostrap4中.col-xs-前缀已被删除，如果需要设置<576px的布局，需使用.col-

    

        * 商品名称
        

            
            
请输入商品名称
        
    
    

        * 副标题
        

            
            
请输入副标题
        
    
    

        * 价格
        

            
            
请输入价格
        
    

3. 使用栅格布局，input自动占据剩余空间

    

        

            商品名称：
            
        
        

            商品编号：
            
        
        

            商品标签：
            
        
        

            查询
            重置