1. 程式人生 > >解決Bootstrap的row類,引起網頁橫向滾動條的問題。

解決Bootstrap的row類,引起網頁橫向滾動條的問題。

在寫網頁的時候,採用了Bootstrap框架,在使用柵格佈局的時候,在父標籤中新增row類,發現引起網頁出現橫向滾動條的問題。

檢視row類的css樣式內容為:

.row{

margin-left:15px;

margin-right:15px;

}
因此確定就是由於這兩個樣式引起的。

故重寫row類的css樣式,即

.row{

margin-left:0px;

margin-right:0px;

}

至於為什麼Bootstrap要將row類的左右外邊距設定為負值,官網解釋為,通過為.row元素設定負值margin從而抵消到.container元素設定的padding,也就間接為“行(row)"所包含的”列(coloum)"抵消掉了padding。而我出現這種問題的原因也是由於沒有將行(row)包含在.container(固定寬度)或.container-fluid(100%寬度)中。

因此,另一種解決方法即是將行(row)包含在.container(固定寬度)或.container-fluid(100%寬度)中。