引導響應視圖

Question

[

<div class="row"> <!-- First rwo --> 
    <div class="col-xs-6"> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Application Source</h3> 
     </div> 
     <div class="panel-body"> 
     <div class="row"> 
     <div class="col-lg-6"> 
     <div class ="form-group"> 
      <label for="text" >Application Source</label> 
      <select name="State" id="State" 
        class="validate[required] form-control"> 
      <option value="">Choose a Source</option> 
      <option value="IP">IPipeline</option> 
      <option value="EX">NGLExpress</option> 
      <option value="OT">Mail/Fax</option> 
      </select> 
      </div><!-- end of from group --> 
      </div> 
     </div> <!-- row close --> 
     </div> <!-- End of panel Body --> 
     </div><!-- End of panel --> 
     </div> <!-- end col-xs-4 --> 
    <div id ="panel2" class="col-xs-6"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Type Of Policy</h3> 
     </div> 
     <div class="panel-body"> 
     <div class="row"> 
     <div class="col-lg-6"> 
     <div class ="form-group"> 
      <label for="text" >Life: <input type="radio" name="PolType" 
       id="PolType" value="L"/> 
      </label> 
      <label for="text" >Annuity: <input type="radio" name="PolType" 
       id="PolType" value="A"/> 
      </label> 
     </div><!-- end of from group --> 
     </div> <!-- col-lg-4 col close --> 
     </div> <!-- row close --> 
     </div> 
    </div> 
    </div> 
    </div><!-- End of first row --> 

Answer 1

這些鏈接可以幫助你調整的列：

1）http://bootply.com/85737

2）http://bootply.com/89910

3）http://bootply.com/61482

我已引用Bootstrap 3 fluid grid layout issues?這些鏈接：

此外，您還可以min-width拉昇面板中，如果沒有足夠的空間，那裏將堆下面的另一個面板之一。應用padding-left: -4px（如此）減少排水溝寬度並相應地調整面板。