如何防止一行堆疊？

Question

我知道引導程序在移動設備上默認爲堆棧，這很好，但我似乎無法弄清楚在移動設備上如何保持州和郡在同一條線上。

這裏是如何看起來移動

被查看之前，這裏是它的外觀時，移動

正如你所看到的州縣如何在移動之前的同一條線上，我需要在移動時將這兩條線放在同一條線上。

我試過使用拉，但不能正常工作。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-horizontal"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 

 
     <div class="form-group"> 
 
     <label for="ddState" class="col-md-1 col-sm-2 col-md-offset-1 control-label">State</label> 
 
     <div class="col-md-2 col-sm-4"> 
 
      <input id="ddState" /> 
 
     </div> 
 

 
     <label for="ddCounty" class="col-md-1 col-sm-2 control-label">County</label> 
 
     <div class="col-md-3 col-sm-4"> 
 
      <div id="ddCounty" class="form-control"></div> 
 
     </div> 
 

 

 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <!-- End State County--> 
 

 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="form-group"> 
 
     <label for="ddDepartment" class="col-md-1 col-sm-2 col-md-offset-1 control-label">Department</label> 
 
     <div class="col-md-6 col-sm-4"> 
 
      <div id="ddDepartment" class="form-control"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- End Department--> 
 

 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="form-group"> 
 
     <label for="ddDistrict" class="col-md-1 col-sm-2 col-md-offset-1 control-label">District</label> 
 
     <div class="col-md-6 col-sm-4"> 
 
      <div id="ddDistrict" class="form-control"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- End District --> 
 

 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="form-group"> 
 
     <label for="txtReporter" class="col-md-1 col-sm-2 col-md-offset-1 control-label">Reporter</label> 
 
     <div class="col-md-6 col-sm-4"> 
 
      <input type="text" id="txtReporter" class="form-control" style="max-width:100%" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- End Reporting Party --> 
 

 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="form-group"> 
 
     <label for="txtAddress" class="col-md-1 col-sm-2 col-md-offset-1 control-label">Address</label> 
 
     <div class="col-md-6 col-sm-4"> 
 
      <input type="text" id="txtAddress" class="form-control" style="max-width:100%" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- End Address --> 
 

 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="form-group"> 
 
     <div id="Cancel" class="col-md-offset-2 col-md-2"> 
 
      <div class="form-control" style="background-color:#1D5F86; color:white; font-weight:bold"> 
 
      <center>Cancel</center> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-offset-2 col-md-2"> 
 
      <div class="form-control" style="background-color:#963146; color:white; font-weight:bold"> 
 
      <center>Submit</center> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

使用-xs-，而不是-sm-

https://www.codeply.com/go/ApwufRJrYd

<div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

      <div class="form-group"> 
       <label for="ddState" class="col-md-1 col-xs-2 col-md-offset-1 control-label">State</label> 
       <div class="col-md-2 col-xs-4"> 
        <input id="ddState"> 
       </div> 

       <label for="ddCounty" class="col-md-1 col-xs-2 control-label">County</label> 
       <div class="col-md-3 col-xs-4"> 
        <div id="ddCounty" class="form-control"></div> 
       </div> 


      </div> 

     </div> 
    </div>