我刚刚在stackoverflow上注册，所以请放轻松我。
我正在构建一个引导程序表单，它是手机上的一列（xs）和两个更大的列（sm及以上）。
我正在使用php来验证用户输入，如果所有内容都验证了该过程进入下一页，但是如果出现错误，那么同一页面将重新加载已选择的值作为表单上的ore-selected，我也是动态的应用has-error类和帮助块跨度来获取更多信息。
我的问题是，当添加帮助块跨度时，布局会搞乱，因为带有错误的表单字段下方的空格仍为空白，而是将下一个表单字段推出到右侧。
这是错误之前的一个jsfiddle： https://jsfiddle.net/ngu5pdx9/
这是一个错误的jsfiddle： https://jsfiddle.net/zvrzfty2/
这里只是为了补充措施，还有php / html代码。
<div class="col-xs-12 col-sm-6 PT20">
<div class="form-group<?php if ($val_bedrooms == "N") { ?> has-error<?php } ?>">
<div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
<label for="bedrooms" class="col-xs-12 control-label acenter" style="line-height: 1em;">Bedrooms</label>
<div class="col-xs-12">
<select name="bedrooms" class="form-control">
<option value="">Please select</option>
<option <?php if ($bedrooms == 1) { ?>selected<?php } ?> value="1">1 bedroom</option>
<option <?php if ($bedrooms == 2) { ?>selected<?php } ?> value="2">2 bedrooms</option>
<option <?php if ($bedrooms == 3) { ?>selected<?php } ?> value="3">3 bedrooms</option>
<option <?php if ($bedrooms == 4) { ?>selected<?php } ?> value="4">4 bedrooms</option>
<option <?php if ($bedrooms == 5) { ?>selected<?php } ?> value="5">5 bedrooms</option>
<option <?php if ($bedrooms == 6) { ?>selected<?php } ?> value="6">6 or more bedrooms</option>
</select>
<?php if (strlen($help_bedrooms) > 0) { ?><span class="help-block"><?php echo $help_bedrooms; ?></span><?php } ?>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 PT20">
<div class="form-group<?php if ($val_bathrooms == "N") { ?> has-error<?php } ?>">
<div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
<label for="bathrooms" class="col-xs-12 control-label acenter" style="line-height: 1em;">Bathrooms</label>
<div class="col-xs-12">
<select name="bathrooms" class="form-control">
<option value="">Please select</option>
<option <?php if ($bathrooms == 1) { ?>selected<?php } ?> value="1">1 full bathroom</option>
<option <?php if ($bathrooms == 2) { ?>selected<?php } ?> value="2">2 full bathrooms</option>
<option <?php if ($bathrooms == 2.5) { ?>selected<?php } ?> value="2.5">2 full and 1 half bathrooms</option>
<option <?php if ($bathrooms == 3) { ?>selected<?php } ?> value="3">3 full bathrooms</option>
<option <?php if ($bathrooms == 3.5) { ?>selected<?php } ?> value="3.5">3 full and 1 half bathrooms</option>
<option <?php if ($bathrooms == 4) { ?>selected<?php } ?> value="4">4 full bathrooms</option>
<option <?php if ($bathrooms == 4.5) { ?>selected<?php } ?> value="4.5">4 full and 1 half bathrooms</option>
<option <?php if ($bathrooms == 5) { ?>selected<?php } ?> value="5">5 full bathrooms</option>
<option <?php if ($bathrooms == 5.5) { ?>selected<?php } ?> value="5.5">5 full and 1 half bathrooms</option>
<option <?php if ($bathrooms == 6) { ?>selected<?php } ?> value="6">6 or more full bathrooms</option>
</select>
<?php if (strlen($help_bathrooms) > 0) { ?><span class="help-block"><?php echo $help_bathrooms; ?></span><?php } ?>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 PT20">
<div class="form-group<?php if ($val_stories == "N") { ?> has-error<?php } ?>">
<div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
<label for="stories" class="col-xs-12 control-label acenter" style="line-height: 1em;">Stories</label>
<div class="col-xs-12">
<select name="stories" class="form-control">
<option value="">Please select</option>
<option <?php if ($stories == 1) { ?>selected<?php } ?> value="1">Single story house</option>
<option <?php if ($stories == 2) { ?>selected<?php } ?> value="2">Two stories</option>
<option <?php if ($stories == 3) { ?>selected<?php } ?> value="3">Three or more stories</option>
</select>
<?php if (strlen($help_stories) > 0) { ?><span class="help-block"><?php echo $help_stories; ?></span><?php } ?>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 PT20">
<div class="form-group<?php if ($val_sqf == "N") { ?> has-error<?php } ?>">
<div class="col-xs-12 col-sm-10 col-md-10 col-md-offset-1 MB20">
<label for="sqf" class="col-xs-12 control-label acenter" style="line-height: 1em;">Sq footage</label>
<div class="col-xs-12">
<select name="sqf" class="form-control">
<option value="">Please select</option>
<option <?php if ($sqf == "Less than 1,500 sqf") { ?>selected<?php } ?> value="1">Less than 1,500 sqf</option>
<option <?php if ($sqf == "1,500 - 2,499 sqf") { ?>selected<?php } ?> value="2">1,500 - 2,499 sqf</option>
<option <?php if ($sqf == "2,500 - 3,499 sqf") { ?>selected<?php } ?> value="2">2,500 - 3,499 sqf</option>
<option <?php if ($sqf == "3,500 - 5,000 sqf") { ?>selected<?php } ?> value="2">3,500 - 5,000 sqf</option>
<option <?php if ($sqf == "More than 5,000 sqf") { ?>selected<?php } ?> value="2">More than 5,000 sqf</option>
</select>
<?php if (strlen($help_sqf) > 0) { ?><span class="help-block"><?php echo $help_sqf; ?></span><?php } ?>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
您可以通过包装前两列并连续两列来解决此问题，如下所示：
<div class="row">
...
</div>
你想要两行，这应该保持良好的对齐。这是显示变化的jsfiddle：