1つの行を積み重ねるのを防ぐ方法は？

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

代わり-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>