创建具有水平和垂直形式字段的引导程序表单

Question

无论如何我可以使用bootstrap创建一个表单，它可以在同一行和水平字段中对齐字段吗？

这样的东西？

在这个cvv MM和YY是在同一行。我怎样才能使用bootstrap形式？

<form role="form">
            <div class="form-group">
                 <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
<div class="form-group">
                 <label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
                </div>
            <div class="form-group">
                 <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>

            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>

我希望cvv与第一个表单字段对齐

Answer 1

将输入字段包装在div中并为其分配col-sm-x类，例如：

<div class="form-group">
    <label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
    </div>
</div>

还要在标签上添加col-sm-x <​​/ p>

对于列：

<div class="form-group">
    <label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
    </div>
    <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
    </div>
</div>

最后，表格类应为form-horizontal根据需要使用col宽度播放

Answer 2

将输入字段如上所示包装在一个div中，但将“form-inline”类添加到此div中。不需要col-sm-x类。

<div class="form-group form-inline">
    <label class="control-label">Expiry date(MM/YYYY) (required)</label>   
        <input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
        <input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
    </div>
</div>