欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

为什么.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding?

为什么.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding?

全局 CSS 样式 · Bootstrap 中文文档
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
为什么要这样做?
关注者
15
 
被浏览
3132
 
 

4 个回答

bootstrap 文档里面关于 Grid 系统给的例子是这样的:

这张图里面,带边框的正是 column。左右两端超出来一部分,这是负值 margin 的结果。

而在真正的使用中,一般都会这样用:
column 里面套一层元素,给这层元素加上 border 或者 background。而 column 本身是没有 border 或者 background 的
实际效果应该是类似下面这样的:

注意左右是对齐的。这样一来,为什么要使用 负值 margin 抵消 padding 就很好理解了。
今天学bootstrap,看源码有觉得很好奇为什么row有一个负margin.文档给的解释的抵消了父元素container的padding. 这里需要注意的是container,(不仅是container,几乎所有元素)的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box. 那么就很好理解container的padding值是往内缩的.正好子元素row的负margin把padding给补上了.

推荐看一篇文章:Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
container默认加上了左右padding,而.row里面的.col-*-*的类也是用padding来实现gutter的,如果row没有用负margin抵消container的padding,那.col的第一个元素和最后一个元素跟container之间将会有间隙。。。其实你可以自己把负margin去掉对比下,看下区别,一看就明白了。。

普通分类: