記一個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做項目，也是踩了不少坑，有問題再記錄，就先寫到這里了。

2019.8.22 修改：

上述解決方案代碼中，讓body overflow為hidden，意思是XY軸超出都隱藏，但如果Y軸內容多也就看不到了，所以提前給html的Y軸設置了scroll來保證Y軸內容過多時，仍然可以正常閱讀。

但我發現這樣的設置產生了一個問題，即便Y軸內容不足以產生滾動條時頁面右側都會默認添加一個滾動條的灰色區域，浪費了部分空間，所以不推薦這么設置：

因此還是推薦直接給body添加 overflow-x:hidden 屬性。