写个问卷调查页面

*若价格不公道，可以让提问者在平台追加赏金哦，平台是您利益的保证

已完成

蓝天白云 3年前发布

悬赏：25.0 元

问题详情：分类: HTML

如图 1 在手机浏览器显示不变形

*若价格不公道，可以让提问者在平台追加赏金哦，平台是您利益的保证。你觉得当前的价格如何呢，奉上您珍贵的一票吧

虚高0人次适中0人次偏低0人次

分享海报会更快解决你的问题哦！分享海报

参考答案：

刘师傅 3年前解决

已赚540.0元

问题描述：一个已经写好的问卷调查页面，在PC上正常显示，而在移动端等小屏设备上控件排版出现混乱。
问题分析：这是典型的HTML页面移动端适配问题，解决问题的办法很多，简单的就是使用bootstrap中的网格布局和媒体响应查询。利用网格弹性布局和媒体响应查询动态调整控件布局和大小，在大屏时充分展开显示，在小屏时收缩布局，紧凑显示。
调整后页面如下：

可见，在PC和移动端均能正常显示，问题解决。
核心代码如下：

<div class="container">
		    <div class="row">
		    	<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
					<form class="form-horizontal" role="form" action="addUser" method="post" id="form">
						 <div class="form-group">
							 <label for="name" class="col-sm-3 col-md-3 control-label">姓名:</label>
						 <div class="col-sm-6 col-md-6">
						 	<input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
						 </div>
						 </div>
						 <div class="form-group">
							 <label for="tel" class="col-sm-3 col-md-3 control-label">电话:</label>
						 <div class="col-sm-6 col-md-6">
							 <input type="text" class="form-control" name="tel" id="tel" placeholder="请输入电话号码">
						 </div>
						 </div>
						 <div class="form-group">
							 <label for="address" class="col-sm-3 col-md-3 control-label">户籍地地址:</label>
						 <div class="col-sm-6 col-md-6" data-toggle="distpicker">
			  				<select data-province="河南省" class="form-control" name="address"></select>
			  				<select data-city="郑州市" class="form-control" name="address" style="margin-top:5px"></select>
			  				<select data-district="管城区" class="form-control" name="address" style="margin-top:5px"></select>
						 </div>
						 </div>
						 <div class="form-group">
							 <label for="leixing" class="col-sm-3 col-md-3 control-label">类型:</label>
							 <div class="col-sm-6 col-md-6">
							 	<select class="form-control" name="leixing" id="leixing" title="选择类型">
									<option>证书咨询</option>
									<option>学历咨询</option>
									<option>证书、学历</option>
									</select>
							 </div>
						 </div>
						 <div class="form-group">
							 <label for="xueli" class="col-sm-3 col-md-3 control-label">学历:</label>
							 <div class="col-sm-6 col-md-6">
							 	<select class="form-control" name="xueli" id="xueli" title="当前学历">
									<option>初中</option>
									<option>高中</option>
									<option>大专</option>
									<option>本科</option>
								</select>
							 </div>
						 </div>
						 <div class="form-group">
							 <div class="col-sm-9 col-md-9" style="text-align:center">
								<input type="submit"  class="btn btn-primary "  value="提交">
							</div>
						</div>
						</form>
					</div>
		 		</div>
			</div>