解决bootstrap缩小布局会乱的问题，缩小一定程度后出现横向滚动条
用bootstrap写了项目一个模块，PC端，当时写的比较随意，没有考虑周全，到放到手机上查看效果的时候，重叠，布局内容乱了，就放大没事。这就尴尬了。
提需求的哥哥给了我两种解决方案，一是pc,手机端都适应，二是放在手机上查看的话还是网页的那种大的页面，用户用手滑查看。(内心OS：其实有这个模块的手机端了，但是俺也不知道为啥不用)
过程很不多说，直接说解决方案吧，便于以后查看。
第一个解决方案的解决办法：
经大哥的大力帮扶，我知道了，可以写两套样式，一个pc版的，一个手机版的，将不能放大缩小很好呈现的部分的代码拿出来，然后网上找一个根据尺寸判断当前登录的是PC端还是手机端的方法，这里我先直接给出：注意jQuery包需要自己找一下网上地址引入一下，这个效果在控制台显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(function () {
//判断是否是手机
var mobile_flag = isMobile();
if (mobile_flag) {
console.log('SHOUJI')
} else {
console.log('PC')
}
})
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var mobile_flag = false;
//根据userAgent判断是否是手机
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width < 500 && screen_height < 800) {
mobile_flag = true;
}
return mobile_flag;
}
</script>
</head>
<body>
</body>
</html>
然后判断好当前页面是在PC还是手机端后，将对应的两套代码带入进去，可以追加.append，也可以插入.html,注意append是追加，写这个的时候注意原有写这个模块的代码需要删去，要不然会出现两个模块，报错。建议.html，这样可以覆盖之前的代码。
我是这样写的
var mobileHtml='xxxxxxxx';
var pcHtml=''xxxxxxxx;
$(function () {
//判断是否是手机
var mobile_flag = isMobile();
if (mobile_flag) {
$("#morp").html(mobileHtml); //morp是我给外面套了一个盒子（div）
//console.log('SHOUJI')
} else {
//console.log('PC')
$("#morp").html(pcHtml);
}
})
好啦
第二个解决方案解决方法：
给body加一个最小宽度 min-width:xxpx;当页面变小时，达到我们设置的最小宽度后，会出现横向滚动条，里面的布局也不会再受到影响。（要具体问题具体分析，设置好不影响里面布局的宽度哦！）
