创建具有水平和垂直表单域的引导表单答案

【问题标题】：Create bootstrap form having horizontal and vertical form field创建具有水平和垂直表单域的引导表单
【发布时间】：2014-01-18 23:28:24
【问题描述】：

我是否可以使用引导程序创建一个表单，该表单可以使字段在同一行以及水平字段中对齐？

这样的？

在此 cvv MM 和 YY 在同一行。我怎样才能使用引导程序形式使其成为可能？

<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 与第一个表单字段对齐

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

如上所述将您的输入字段包装在一个 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>

【讨论】：

【解决方案2】：

将您的输入字段包装在一个 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

对于列：

<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 width

【讨论】：

这实际上不是我问的问题。我想知道我是否可以在一行中有两个字段？
是的，这就是答案。使用列。
你能用两个输入字段更新你的答案吗？这样我就可以标记它是否有效？
我的印象是form-group 类应该只包含一个标签和一个输入，但也许我错了！