bootstrap 當嵌套列時 有時會出現很奇異的row 的width不對問題
出現的情況時
1 <div class="row" > <!--row a--> 2 <div class="col-xs-12 col-lg-6 col-lg-offset-3"> 3 <div class="row"> <!-- row b--> 4 <div class="col-xs-12"> 5 ... 6 </div> 7 </div> <!--row b--> 8 </div> 9 </div> <!-- row a -->
此時rowb的寬度計算會出現bug 在手機屏幕上將溢出
解決方案很簡單 對row a設置樣式overflow:hidden;(事先聲明,這種解決方式有細微缺陷,但是基本不影響,而且簡單實用)
此時對rowb 的設置width:100%; (在瀏覽器f12的盒子模型里可以看到width確實是對的(與父元素的width保持一致),但給它一個邊框會發現視覺上真實的寬度是明顯不夠的(和父元素的width不等,非常詭異))
或者給rowb加一個父級元素container都是錯誤的做法,(此時手機屏幕上的不再溢出,在大屏幕上將會溢出)
為什么會有這個問題,可以去f12看row和col的盒子模型,因為bootstrap的col 默認有gutter(即col有左右的padding分別15px)
如果覺得這種默認不好,我們可以自己制定規則覆蓋默認
定義樣式如下
1 .row.no_gutter [class^="col-"],.row.no_gutter [class*="col-"]{ 2 padding-right:0px; 3 padding-left:0px; 4 }
然后需要嵌套列時,只需要將此嵌套的行加一個樣式類就ok了,like this:
1 <div class="row" > <!--row a--> 2 <div class="col-xs-12 col-lg-6 col-lg-offset-3"> 3 <div class="row no_gutter"> <!-- row b--> 4 <div class="col-xs-12"> 5 ... 6 </div> 7 </div> < ！-- row b is end --> 8 </div> 9 </div> <!-- row a is end -->
或者也可以去改bootstrap源碼,對於專業的前端工程師來說,
毫無疑問本地是有一套比如npm-bower-grunt的編譯環境的,
此時 運行 bower install bootstrap
然后在項目下 運行 npm install
然后在其less文件夾下找variables.less文件 更改 @grid-gutter-width:30px; 的值即可(想再詳細具體一點,精確到每個不同分辨率的設備的gutter請參照http://v3.bootcss.com/css/ (側邊欄less mixin和變量欄))
然后 運行 grunt dist 就能在dist文件夾下取編譯后的版本了.