1. 程式人生 > >解決Bootstrap container樣式左右內邊距15px,導致螢幕不美觀

解決Bootstrap container樣式左右內邊距15px,導致螢幕不美觀

首先上問題:此問題為bootstrap的 container樣式導致,該樣式預設左右內邊距15px為了柵欄效果而設計,具體看原始碼css樣式,如下圖,右側黃色邊框邊距和30px,實為兩個div左浮動,將邊距擠到右側;

解決它很簡單:只需複寫 container樣式 padding-left:0px 和padding-right:0px; 然後在該容器子元素 row複寫樣式 .row{margin:0};即可,如果row有子元素列,col-*-* {padding:0}即可,修改後,結果圖:

還有種方案:定義面板樣式,可以完美避開這個問題,例如:<div class="panel panel-default"></div>