bootstrap表单label和input在一行显示

Posted 2021-09-24 望记

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>