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我添加了这些类，以便您可以在工作中看到解决方案。希望能帮助到你。