1

我正在将我在引导程序 2 中编写的表单移动到响应式引导程序 3。

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

大视口

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

在此处输入图像描述

如何使大小网格之间的所有元素之间的间距相等，并专门针对a 中col-sm-12项目之间的高度form-group（就像我们对 firstName 和 lastName 所做的那样）？

我的代码在下面，jsfiddle 在这里：

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

3 回答 3

4

使用 CSS 和媒体查询：

@media (max-width: 991px)
{    
    .form-group .col-sm-12:first-child{margin-bottom:15px;} 
}
于 2013-08-30T22:44:53.373 回答
4

您不想自己添加保证金有什么特别的原因吗？因为如果您提供form-groupid 以更准确地选择，您可以使用简单的 css 选择器定位所有列。以下是片段，您也可以查看结果和在线片段。

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*/
}
于 2013-08-31T02:36:14.907 回答
0

对我来说一个解决方案是：

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

诀窍是当两者都变为全宽时，在输入之间增加一个边距。

于 2017-01-25T09:16:50.113 回答