关于前端:bootstrap表单label和input在一行显示

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>