bootstrap简介中的一点问题

刚才看到这句:
通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
不是很能理解是怎么个说法,有没有通俗一点的说法或者例子??

阅读 1.9k
1 个回答
新手上路,请多包涵

row的负margin值主要是为了消除最左边和最右边的column元素和container的边距

可以看下原文(http://getbootstrap.com/css/#...

Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.

我们知道bootstrap中栅格的使用顺序是 container -> row -> col

他们的css定义:

.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}

.col-*-* {
    padding-right: 10px;
    padding-left: 10px;
}

如果没有负margin的抵消,前后就会有间隙,你可以自己把负margin去掉对比下,看下区别

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题