Bootstrap响应视图

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（如此）以减少装订线宽度并相应地调整面板。