ブートストラップ3ヘルプブロックレイアウトの問題

Question

私はちょうどstackoverflowに登録していますので、簡単に私に行ってください。

私は、携帯電話（xs）に1列、大きなもの（sm以上）に2列のブートストラップフォームを構築しています。

私はユーザー入力を検証するためにPHPを使用していますが、すべてが検証された場合は次のページに進みますが、エラーが発生した場合は、フォーム上でore-selectedとして既に選択されている値で同じページがリロードされます。詳細エラーのクラスとヘルプブロックスパンを動的に適用します。

私の問題は、エラーのあるフォームフィールドの下のスペースが空白のままで、代わりに次のフォームフィールドを右に押し出すため、ヘルプブロックスパンが追加されるとレイアウトが乱れてしまうことです。ここで

は、エラーの前に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> 

Answer 1

あなたはそうのように、行のあなたの最初の2つの列、最後の2つの列をラップすることにより、この問題を解決することができます

<div class="row"> ... </div>

あなたは2つの行をしたい、これがうまく整合し、物事を維持する必要があります。

https://jsfiddle.net/ocuatf8u/