编辑:
我已经在 JsFiddle 上更新了我的演示，请看一下。
我不确定是什么导致输入之间的空间，你可以看到它非常不一致并给出空间，缺少什么？
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane active cont" id="we">
<span style="float: right; padding: 4px 6px;"><a href='javascript:history.go(-1)'>Go Back to Previous Page</a> </span>
<span style="float: right; padding: 4px 6px;"><font color="red">*</font> Indicates required field</span>
<div class="cl-mcont">
<div class="row">
<div class="col-md-12">
<div class="block-flat">
<div class="page-head">
<h3>
Bootstrap Template
</h3>
</div>
<div class="content">
<form action="/xcel" class="form-horizontal data-parsley-validate" id="fForm" method="post">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Category</label>
<div class="col-sm-6">
<select class="select2" id="on" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Tier</label>
<div class="col-sm-6">
<select class="select2" id="tw" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="te" placeholder=" Name" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Code</label>
<div class="col-sm-6">
<input class="form-control" id="df" name="ClientCode" placeholder=" Code" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Model</label>
<div class="col-sm-6">
<input class="form-control" id="adg" placeholder=" Model" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="fd" placeholder=" Center" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Center</label>
<div class="col-sm-6">
<input class="form-control" id="sa" placeholder=" Center" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Name</label>
<div class="col-sm-6">
<input class="form-control" id="aeh" placeholder=" Name" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
CI </label>
<div class="col-sm-6">
<input class="form-control" id="he" placeholder="CI " type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Production </label>
<div class="col-sm-6">
<input class="form-control" id="jg" placeholder="Production IP" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Action</label>
<div class="col-sm-6">
<select class="select2" id="lk" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Description</label>
<div class="col-sm-6">
<input class="form-control" id="ui" placeholder=" Description" type="text" value="" />
</div>
</div>
</div>
<div style='clear: both'>
</div>
<div style='clear: both'>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Physical </label>
<div class="col-sm-6">
<select class="select2" id="lj" style="width:250px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Read</label>
<div class="col-sm-6">
<input class="form-control" id="io" placeholder=" Read" type="text" value="" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-4 control-label">
Write</label>
<div class="col-sm-6">
<input class="form-control" id="po" placeholder=" Write" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
Test</label>
<div class="col-sm-6">
<select class="select2" id=".j" style="width:265px;">
<option value="Production">Production</option>
<option value="Production">Production</option>
</select>
</div>
</div>
</div>
<div class="form-group"> </div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
您有两个高度不等的 .col-md-6 元素。
下一个(第三个).col-md-6 将始终位于下一行，从之前最高的 sibling 下方开始。
如果要删除该空间，您需要通过在其内部元素周围添加更多填充(.select2 s).
更新。我还注意到一件事:为了从 bootstrap 的 CSS 中获得最大 yield ，您应该坚持使用它的标记。您应该将 .col-XX-Y 作为 .row 或 .row-fluid 元素的直接子元素。否则你会问自己为什么某些元素看起来没有对齐，并且在不同的响应级别修复它们会很痛苦。
根据评论，我更新了您的 fiddle .
为了使两列相等，我使 select2 的高度与 Bootstrap 输入的高度相等:
.select2-container .select2-selection--single {
height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 34px;
}
.select2-container {
width: 100% !important;
}
请注意，我还从您的 html 中删除了一些内联样式，不仅仅是 CSS。
关于css - 使用 Bootstrap 的元素之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33788769/