html5 - bootstrap简介中的一点问题

问题描述

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

问题解答

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

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

Columns create gutters (gaps between column content) via padding. Thatpadding is offset in rows for the first and last column via negativemargin 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去掉对比下，看下区别