我刚在stackoverflow注册了，所以请你放轻松。
我正在构建一个bootstrap表单，其中一个列在移动电话（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>
最佳答案
可以通过将前两列和最后两列换行来解决此问题，如下所示：<div class="row"> ... </div>
如果你想要两行，这应该能很好地对齐。下面的jsfiddle显示了更改：
https://jsfiddle.net/ocuatf8u/
关于php - Bootstrap 3帮助块布局问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38685259/