Bootstrap HTML表單，不響應

Question

我已經使用引導列創建了一個html表單來獲取所需的佈局。這是關於我想要桌面的地方，但它在移動設備上堆積如山。我不相信我用過的任何代碼都是使用bootstrap。這裏是形式本身：

<div class="center_div"> 
     <div class="row"> 
      <div class="form-group col-xs-5"> 
       <h3>First Name</h3> 
       <input name="fName" type="text" /> 

      </div> 
      <div class="form-group col-xs-5"> 
       <h3>Last Name</h3> 
       <input name="lName" type="text" /> 

      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-5"> 
       <h3>Company Name</h3> 
       <input name="compName" type="text" /> 

     </div> 
     <div class="form-group col-xs-5"> 
      <h3>Business Type</h3> 
      <select class="form-control" style="width: 100%;" name="businessNeeds"> 
       <option value="">Select...</option> 
       <option value="IntDesign">Interior Designer</option> 
       <option value="Ecom">E-Commerce Only</option> 
       <option value="Retail">Retail Store Only</option> 
       <option value="RetailEcom">Retail and E-Commerce</option> 
       <option value="Mult">Multiple Locations</option> 
      </select> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-10"> 
      <div class="input-group input-group-xs"> 
       <h3>Address</h3> 
       <input class="form-control input-lg" name="address" type="text" /> 

      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group col-xs-5"> 
      <h3>City</h3> 
      <input name="city" type="text" /> 

     </div> 
     <div class="form-group col-xs-2"> 
      <h3>State</h3> 
      <select name="state"> 
       <option value="">Select...</option> 
       /*Took out states for space*/ 
      </select> 

     </div> 
     <div class="form-group col-xs-3"> 
      <h3>Zip</h3> 
      <input name="zip" type="text" /> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group col-xs-5"> 
      <h3>Phone</h3> 
      <input name="phone" type="text" /> 

     </div> 
     <div class="form-group col-xs-5"> 
      <h3>Email</h3> 
      <input id="email" name="uemail" type="text" /> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group col-xs-4"> 
      <h3>Create a Username</h3> 
      <input name="uname" type="text" /> 

     </div> 
     <div class="form-group col-xs-3"> 
      <h3>Create a Password</h3> 
      <input class="form-control" style="width: 100%;" name="pass" type="password" /> 

     </div> 
     <div class="form-group col-xs-3"> 
      <h3>Confirm Password</h3> 
      <input class="form-control" style="width: 100%;" name="ConfPass" type="password" /> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group col-xs-5"> 
      <h3>Sales Tax ID</h3> 
      <input name="taxID" type="text" /> 

     </div> 
     <div class="form-group col-xs-5"> 
      <h3>Upload Tax ID Certificate</h3> 
      <input name="fileUpload" type="file" /> 

     </div> 
    </div> 
    <div class="buttonHolder"> 
     <input type="submit" value="Submit" /></div> 
    </div> 
</form> 

的CSS：

.center_div{ 
    padding-left:150px; 
    position:relative; 
    width:100%; 
    margin:0 auto; 
} 

@media only screen and (max-width: 600px){ 
    .mainForm{ 

} 

.center_div{ 

    width:100%; 
    margin:0 0 15px 0; 
} 

.center_div label{ 
    width:100%; 
    float: none; 
    margin:0 0 5px 0; 
} 

.mainForm是圍繞形式的空白格，有沒有別的網頁上。我離開CSS非常準確，但是有沒有一種相當簡單的方法可以使用bootstrap在移動設備上做出更好的響應？即使所有的田地都坐在一起。

Answer 1

所有引導行必須位於.container div中，否則它們將無法按預期工作。

爲了在較小的屏幕上堆疊表單元素，並且在兩個列（每個6個網格列，實際上）上有更大的分辨率，您需要將兩個類應用到您的列。

<div class="form-group col-xs-12 col-sm-6"> 

基本上你告訴引導，從最小分辨率元素（XS）應跨越12個網格列，而對於小的分辨率（SM）的元素應跨越6個網格列。

在this codepen我添加了這些類，以便您可以在工作中看到解決方案。希望能幫助到你。