引導3求助塊佈局問題

Question

，所以請去容易在我身上。

我建立一個引導形式，是在手機上（XS）和大一點兒的兩列（SM及以上）的一列。

我使用php來驗證用戶條目，如果一切都驗證過程進入下一頁，但是如果出現錯誤，那麼同一頁面將重新加載已經選擇的值作爲表格上的選中值，我也是動態應用有錯誤類和幫助塊跨度以獲取更多信息。

我的問題是，當加入幫助塊跨度那麼佈局搞砸了，因爲下面有錯誤的表單域的空間仍然空白，而是將出下一個表單域的權利。

這裏是錯誤之前的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

您可以通過包裝你的前兩列，並且最後兩列在一排，像這樣解決這個問題：

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

你要兩排，這應該讓事情很好地對齊。這裏是jsfiddle顯示的變化：

https://jsfiddle.net/ocuatf8u/