當在智能手機上查看時，自舉行項互相碰撞

Question

當我在移動設備上查看它時，我有一行其項目正在運行到彼此中，並且我不確定如何在移動設備上查看它們時如何使這兩個項目堆疊移動設備

下面是它看起來像在移動

，你可以從第一行看，它運行到海誓山盟在現實中，它應該在頂部狀態棧然後郡下方。任何想法我做錯了什麼？我不與引導

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div> 
 
    <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-1 col-xs-2 col-md-offset-1 control-label">State</label> 
 
      <div class="col-md-2 col-sm-2 col-xs-2"> 
 
      <input id="ddState" /> 
 
      </div> 
 

 
      <label for="ddCounty" class="col-md-1 col-sm-1 col-xs-2 control-label">County</label> 
 
      <div class="col-md-2 col-sm-4 col-xs-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-xs-2 col-md-offset-1 control-label">Department</label> 
 
      <div class="col-md-5 col-sm-4 col-xs-10"> 
 
      <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-xs-2 col-md-offset-1 control-label">District</label> 
 
      <div class="col-md-5 col-sm-4 col-xs-10"> 
 
      <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-xs-2 col-md-offset-1 control-label">Reporter</label> 
 
      <div class="col-md-5 col-sm-4 col-xs-10"> 
 
      <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-xs-2 col-md-offset-1 control-label">Address</label> 
 
      <div class="col-md-5 col-sm-4 col-xs-10"> 
 
      <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 col-xs-offset-2"> 
 
      <div class="form-control" style="background-color:#1D5F86; color:white; font-weight:bold"> 
 
       <center>Cancel</center> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-offset-1 col-md-2 col-xs-offset-1"> 
 
      <div class="form-control" style="background-color:#963146; color:white; font-weight:bold"> 
 
       <center>Submit</center> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

我已經更新了標記一點點所有偉大。希望這可以幫助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<style type="text/css"> 
 
    @media only screen and (max-width : 768px) { 
 
\t \t .topMargin{ 
 
\t \t \t margin-top: 10px; 
 
\t \t } 
 
\t } 
 
</style> 
 

 
<div class="container"> 
 

 
\t <div class="row form-group"> 
 
\t \t <div class="col-md-2 col-sm-2 col-xs-12"><label for="ddState" class="control-label">State</label></div> 
 
\t \t <div class="col-md-4 col-sm-4 col-xs-12"><input id="ddState" /></div> 
 

 
\t \t <div class="col-md-2 col-sm-2 col-xs-12 topMargin"><label for="ddCounty" class="control-label">County</label></div> 
 
\t \t <div class="col-md-4 col-sm-4 col-xs-12"> 
 
\t \t \t <div id="ddCounty" class="form-control"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="row form-group"> 
 
\t \t <div class="col-md-2 col-sm-2 col-xs-12"><label for="ddDepartment" class="control-label">Department</label></div> 
 
\t \t <div class="col-md-10 col-sm-10 col-xs-12"> 
 
\t \t \t <div id="ddDepartment" class="form-control"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="row form-group"> 
 
\t \t <div class="col-md-2 col-sm-2 col-xs-12"><label for="ddDistrict" class="control-label">District</label></div> 
 
\t \t <div class="col-md-10 col-sm-10 col-xs-12"> 
 
\t \t \t <div id="ddDistrict" class="form-control"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="row form-group"> 
 
\t \t <div class="col-md-2 col-sm-2 col-xs-12"><label for="txtReporter" class="control-label">Reporter</label></div> 
 
\t \t <div class="col-md-10 col-sm-10 col-xs-12"><input type="text" id="txtReporter" class="form-control" style="max-width:100%" /></div> 
 
\t </div> 
 

 
\t <div class="row form-group"> 
 
\t \t <div class="col-md-2 col-sm-2 col-xs-12"><label for="txtAddress" class="control-label">Address</label></div> 
 
\t \t <div class="col-md-10 col-sm-10 col-xs-12"> <input type="text" id="txtAddress" class="form-control" style="max-width:100%" /></div> 
 
\t </div> 
 

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

 
</div>