如何从引导程序中删除所有边距container-fluid
类及其行?
.container-fluid { padding: 0;}
这基本上满足了我的要求,但它为正文增加了 20px 溢出。那么我应该这样做:
body, html { overflow-x: hidden; }
做某事与.container-fluid > .row
具体说明您的问题:
The .row
具有负的左右边距,等于左/右填充值col-*-*
,这就是为什么当您在不了解网格如何工作的情况下摆弄网格时会出现水平滚动条的原因。如果您使用左侧和右侧的零填充或其他值来操作列类,则 .row 上的负边距必须等于列类左侧和右侧的填充。 .container 还具有与列类的值匹配的填充,以防止出现滚动条。
所以答案是:.container-fluid > .row
-- 如果删除列类左侧和右侧的填充,则使左侧和右侧的边距为:0。如果全部为零,那么您只需调整 .container 或 .container 流体,左侧和右侧填充为零,但如果您使用不同的值 > 15px L & R,那么情况就不同了.container/.container-fluid
如果列的左右内边距大于 15px,则需要调整。
上没有边距col-*-*
当你像 Boostrap 3 那样全局使用 box-sizing:border-box 时,它的填充是完全不同的。
如果您想要紧密的网格,请删除网格上的所有填充物left and right所有列类,然后remove the negative margin on the left and right of the .row
,然后你可以删除左边和右边padding on the .container
.
DEMO: http://jsbin.com/jeqase/2/ http://jsbin.com/jeqase/2/
删除所有填充和负边距,以实现紧密网格和 .container 的全宽以及该类的任何周围元素(body、html 等).alt-grid
:
.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
- 唯一要归零的是左右填充。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)