关于Twitter Bootstrap中列gutter的说明

Question

任何人都可以详细解释这句话的内容吗？

  

列通过填充创建装订线（列内容之间的间隙）。那   padding在第一列和最后一列的行中通过负数偏移   .rows的边距。    - http://getbootstrap.com/css/#grid-intro

我需要了解排水沟计算的工作原理。

谢谢你^^

Answer 1

基本上，每个列的装订线都是通过填充定义的。因此，请考虑以下示例：

<div class="row">
    <div class="col1"></div>
    <div class="col1"></div>
    <div class="col1"></div>
</div>

如果我想在每列上放一个20像素的装订线，我可以定义：

.col1 {
    float: left;
    width: 200px;
    padding-left: 20px;
}

这很有效，除了我的第一列还有一个20像素的装订线，我不想要。因此，我可以指定.col1:first-child，但是更容易在行上定义负左边距，从而取消第一列的装订线测量：

.row {
    float: left;
    margin-left: -20px;
}