twitter-bootstrap 使用 bootstrap 3 最小化视口时使用 col-md-6 间距的表单控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18538841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form control using col-md-6 spacing when viewport minimised with bootstrap 3
提问by morleyc
I am moving a form i wrote in bootstrap 2 across to responsive bootstrap 3.
我正在将我在引导程序 2 中编写的表单移动到响应式引导程序 3。
When the large grid is displayed there is nice spacing between all elements. The below works OK for large viewports:
当显示大网格时，所有元素之间都有很好的间距。以下适用于大型视口：
When the viewport is minimized and small grid media selected, the firstName and lastName wrap as intended, but it looks ugly as there is no space between these two rows (like there is for the emailAddress and companyName):
当视口最小化并选择小网格媒体时， firstName 和 lastName 按预期换行，但由于这两行之间没有空格（就像 emailAddress 和 companyName 一样），它看起来很丑陋：
How can i make equal spacing between all elements the same between both small and large grids, and specifically target the height between col-sm-12items within a form-group(as we have with firstName and lastName)?
我如何才能使小网格和大网格之间的所有元素之间的间距相等，并专门针对col-sm-12a 内的项目之间的高度form-group（就像我们对 firstName 和 lastName 所做的那样）？
My code is below and jsfiddle is here:
我的代码在下面，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>
回答by Bass Jobsen
With CSS and Media Queries:
使用 CSS 和媒体查询：
@media (max-width: 991px)
{
.form-group .col-sm-12:first-child{margin-bottom:15px;}
}
回答by AJ Meyghani
Is there a particular reason why you don't want to add margin yourself? Because you can target all of the columns with a simple css selector if you give your form-groupan id to select with more accuracy. Below is the snippet and you can check the resultand online snippetas well.
您不想自己添加保证金有什么特别的原因吗？因为如果您提供form-group一个 id 以更准确地选择，您可以使用一个简单的 css 选择器来定位所有列。下面是代码片段，您也可以检查结果和在线代码片段。
HTML
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
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*/
}
回答by xhostar
A solution for me is:
对我来说的解决方案是：
<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>
The trick is to whistle up a margin between inputs just when both change to full width.
诀窍是当两个输入都变为全宽时，在输入之间增加一个边距。
