创建具有水平和垂直表单字段的引导表单 [英] Create bootstrap form having horizontal and vertical form field

问题描述

有无论如何，我可以使用bootstrap创建一个表单，它可以包含字段和水平字段一样的字段？

类似这样的东西？

在这个CVM MM和YY是在同一条线..我怎样才能使用bootstrap窗体？

 < form role =form> 
< div class =form-group> 
< label for =exampleInputEmail1>电子邮件地址< / label>< input type =emailclass =form-controlid =exampleInputEmail1/> 
< / div> 
< div class =form-group> 
< label for =exampleInputEmail1> CVV< / label>< input type =emailclass =form-controlid =cvv/> 
< / div> 
< div class =form-group> 
< label for =exampleInputPassword1>密码< / label>< input type =passwordclass =form-controlid =exampleInputPassword1/> 
< / div> 
 
< button type =submitclass =btn btn-default>提交< / button> 
< / form> 
< / div> 
  

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

解决方案

将输入字段包装在div中，并为其分配一个 col-sm-x <​​/ code>类，例如：

 < div class =form-group> 
< label class =col-sm-3 control-labelfor =cardNumber> Card＃（必填）< / label> 
< div class =col-sm-5> 
< input type =textclass =form-controlid =cardNumbersize =12autocomplete ='off'> 
< / div> 
< / div> 
  

同时为您的标签添加一个col-sm-x



对于列：



 < div class =form-group> 
< label class =col-sm-3 control-label>到期日期（MM / YYYY）（必填）< / label> 
< div class =col-sm-2> 
< input type =textclass =form-controlplaceholder =MMsize =2autocomplete ='off'> 
< / div> 
< div class =col-sm-2> 
< input type =textclass =form-controlplaceholder =YYYYsize =4autocomplete ='off'> 
< / div> 
< / div> 
  

最后，form的类应该是 form-horizo​​ntal 按照你喜欢的宽度播放

Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?

Something like this?

in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?

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

I want the cvv to be aligned with the first form field

解决方案

Wrap your input fields in a div and assign a col-sm-x class to it e.g:

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

Also add a col-sm-x to your labels

For columns:

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

Finally, class of form should be form-horizontal Play with the col width as you like

这篇关于创建具有水平和垂直表单字段的引导表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！