【发布时间】：2021-10-11 16:41:50
【问题描述】：
我使用引导列创建了一个 html 表单来获得所需的布局。这是关于我想要它用于桌面的地方，但它在移动设备上堆积在一起。我不相信我使用的任何代码都与引导程序一起使用。这是表单本身：
<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 是表单周围的空白 div，页面上没有其他内容。我离开了 CSS 相当准系统，但是有没有一种相当简单的方法可以通过引导程序在移动设备上做出更好的响应？即使所有的田地只是彼此重叠。
【问题讨论】：
标签： html css forms responsive