记一个bootstrap定制container导致页面X轴出现横向滚动条的坑

 壹 ❀ 引

 在bootstrap定制时，因为UI给的图纸的页面主体部分宽度为1200px，所以我将container容器宽度从默认的1170px改成了1200px，随后在页面缩小的调试过程中发现了页面横轴出现了滚动条，这我就差异了，页面除了container是1200px以外，头部尾部的都是宽度100%，还能有哪个地方超出，简单调试结合bootstrap特性发现了问题所在，这里做个记录。

 贰 ❀ 问题

在调试过程中，看了下container容器的宽度，是1200px没错。

但是在查看头部时，发现了一个有趣的问题，头部的宽度是100%，此时调试宽度也确实显示的是1200px，但头部给我显示的内容宽度却只有1184px，怎么凭空少了十几像素。

结果才想起来，因为页面内容比较多，Y轴有滚动条，所以屏幕的1200px被滚动条占去了一部分，实际上并没有这么多。

而bootstrap使用的媒体查询，原本的临界点是屏幕宽度在1200px之上时，container宽度为1170px，特意留了30px当做缓冲。

恰好我在定制时修改了container的宽度，导致页面缩小快到1200px时，container容器一直是固定的1200px，页面因为滚动条的缘故实际不够1200px，这才导致X轴出现了滚动条。

所以说bootstrap在做媒体查询时，不让controller宽度与媒体查询临界点宽度相同还是有一定原因的...

 那么怎么解决呢？第一种可以修改媒体查询临界点宽度，这个需要定制解决，其次还可以直接通过overflow处理下就好了。

 叁 ❀ 解决

加上这段代码就可以了：

html {
overflow-y: scroll;
}

body {
width: 100%;
overflow: hidden;
}

最近在使用bootstrap做项目，也是踩了不少坑，有问题再记录，就先写到这里了。