写个问卷调查页面

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

已完成
写个问卷调查页面-蓝天白云
蓝天白云 1年前发布
悬赏:25.0 元

问题详情:分类: HTML



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

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

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

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

参考答案:

刘师傅 1年前解决
已赚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>

此处可发布评论

评论(0

暂无评论,快来写一下吧
客服QQ 1913284695