使用引导程序3最小化视口时使用col-md-6间距进行表单控件

Question

我正在将我在bootstrap 2中编写的表单移动到响应式bootstrap 3。

当显示大网格时，所有元素之间的间距都很大。以下适用于大型视口：

当视口最小化并选择了小网格媒体时，firstName和lastName按预期包装，但它看起来很丑，因为这两行之间没有空格（就像emailAddress和companyName一样）：

如何在小网格和大网格之间的所有元素之间保持相同的间距，并且专门针对col-sm-12中form-group个项目之间的高度（我们使用firstName和lastName）？

我的代码位于以下 jsfiddle is here ：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <div class="col-md-12"><label class="control-label">Billing Contact</label></div>
    </div>
    <div class="form-group">
        <div class="col-md-6 col-sm-12"><input id="firstName" class="form-control" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', attr: { placeholder: 'First Name' }" /></div>
        <div class="col-md-6 col-sm-12"><input id="lastName" class="form-control" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Last Name' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="emailAddress" class="form-control" type="text" data-bind="value: emailAddress, valueUpdate: 'afterkeydown', attr: { placeholder: 'E-mail Address' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="companyName" class="form-control" type="text" data-bind="value: companyName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Company Name' }" /></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><label class="control-label">Billing Address</label></div>
    </div>
    <div class="form-group">
        <div class="col-md-12"><input id="address1" class="form-control" type="text" data-bind="value: address1, valueUpdate: 'afterkeydown', attr: { placeholder: 'Street Address' }" /></div>
    </div>
</form>

Answer 1

使用CSS和媒体查询：

@media (max-width: 991px)
{    
    .form-group .col-sm-12:first-child{margin-bottom:15px;} 
}   

Answer 2

您是否有特殊原因想要自己添加保证金？因为您可以使用简单的css选择器定位所有列，如果您为form-group ID提供更准确的选择。以下是代码段，您也可以查看 result 和在线 snippet 。

<强> HTML

    <form class="form-horizontal" role="form">
        <div class="form-group" id="main-form">
            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
            </div>
        </div>
    </form>

<强> CSS

#main-form > [class^="col-"] { /* This will grab all the elements with classes that start with "col-" and that are the immediate children of #main-form. */
    margin-bottom: 20px;
    /* or the value of your bootstrap's gutter width so that you can have a nice consistent margin between elements*/
}

Answer 3

我的解决方案是：

<div class="form-group">
    <div class="col-md-6 col-sm-12"><input id="firstName" class="form-control" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', attr: { placeholder: 'First Name' }" /></div>
    <div class="clearfix mb-1 hidden-md-up"></div> <!-- this block -->
    <div class="col-md-6 col-sm-12"><input id="lastName" class="form-control" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', attr: { placeholder: 'Last Name' }" /></div>
</div>

诀窍是在两者都改变​​为全宽时，在输入之间掏出一个边距。