bootstrap表单中label和input在一行显示的几个示例，本文中应用的bootstrap版本都是4.4.1
1. 应用form-inline
<form action=""> <div class="form-group"> <div class="form-inline"> <label class="mb-2">规格值：</label> <input class="form-control mr-2 mb-2" type="text" placeholder="如:红色" /> <input class="form-control mr-2 mb-2" type="text" placeholder="如:彩色" /> <button type="button" class="btn btn-link mb-2">+ 增加规格值</button> </div> </div></form>2. 应用栅格布局
留神：boostrap4中.col-xs-前缀已被删除，如果须要设置<576px的布局，需应用.col-
<form action=""> <div class="form-group row"> <label for="title" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 商品名称</label> <div class="col-sm-8 col-8"> <input type="text" class="form-control" id="title" name="title" placeholder="请输出"> <div class="invalid-feedback">请输出商品名称</div> </div> </div> <div class="form-group row"> <label for="subtitle" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 副标题</label> <div class="col-sm-8 col-8"> <input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="请输出"> <div class="invalid-feedback">请输出副标题</div> </div> </div> <div class="form-group row"> <label for="price" class="col-md-2 col-sm-3 col-4 col-form-label text-right"><span class="text-danger">*</span> 价格</label> <div class="col-sm-8 col-8"> <input type="text" class="form-control" id="price" name="price" placeholder="请输出"> <div class="invalid-feedback">请输出价格</div> </div> </div></form>3. 应用栅格布局，input主动占据残余空间
<form> <div class="form-row"> <div class="col-lg-3 col-sm-6 mb-2 input-group"> <label for="" class="col-form-label">商品名称：</label> <input type="text" class="form-control" placeholder="请输出"> </div> <div class="col-lg-3 col-sm-6 mb-2 input-group"> <label class="col-form-label">商品编号：</label> <input type="text" class="form-control" placeholder="请输出"> </div> <div class="col-lg-3 col-sm-6 mb-2 input-group"> <label class="col-form-label">商品标签：</label> <input type="text" class="form-control" placeholder="请输出"> </div> <div class="col-lg-3 col-sm-6 mb-2"> <button type="submit" class="btn btn-primary mb-2">查问</button> <button type="reset" class="btn border mb-2">重置</button> </div> </div></form>