如何從類boost及其行中刪除所有邊距?bootstrap容器流體 - 刪除邊距正確的方法(溢出)
.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..
所以我應該只是,
body, html { overflow-x: hidden; }
做點什麼.container-fluid > .row
如何從類boost及其行中刪除所有邊距?bootstrap容器流體 - 刪除邊距正確的方法(溢出)
.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..
所以我應該只是,
body, html { overflow-x: hidden; }
做點什麼.container-fluid > .row
要具體談談你的問題:
的.row
具有負左右邊距等於col-*-*
的左/右填充值,這就是爲什麼當您在不理解工作原理的情況下襬弄網格時是否存在水平滾動條。如果您在左側和右側使用零填充操作列類或使用其他值,則.row上的負邊距必須等於列類左側和右側的填充。 .container也具有與列類的值相匹配的填充以防止滾動條。
所以,答案是:.container-fluid > .row
- 如果刪除列類的左側和右側的填充,請在左側和右側留出邊距:0。如果全部爲零,那麼您可以在左側和右側調整.container或.container流體的零填充,但是如果使用不同的值> 15px L & R,則這是一個不同的故事,因爲.container/.container-fluid
需要是如果列上的左側和右側填充大於15px,則進行調整。
col-*-*
它沒有邊距填充,當你使用盒子大小:全局的邊框--Boostrap 3時,它是完全不同的。
如果你想要一個緊的網格,刪除所有填充在左和所有列類的權然後刪除的負保證金在左和權.row
,然後你可以在.container
上刪除左邊和右邊的填充。
DEMO:http://jsbin.com/jeqase/2/
移除用於緊密網格和與任何周圍的元件.container的整個寬度與類.alt-grid
所有填充和負裕度(體,HTML,任何):
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
您也可以使用.container-fluid
來做到這一點 - 唯一需要填的是左側和右側填充。
如果你想刪除保證金,overidding引導類或DIV(集裝箱液,HTML,體)不是最好的事情。我認爲最好創建一個單獨的類並將其添加到元素中。 如果你想刪除所有邊距:如果您要刪除所有邊距和補
.remove-all-margin{
margin:0 ! important;
}
:
.remove-all-margin-padding{
margin:0 ! important;
padding:0 ! important;
}
將自定義類添加到要擺脫邊距而非覆蓋所有引導元素的元素總是更好的方法。
row.no-margin{ margin:0 ! important; }