如何从类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; }