twitter-bootstrap - Bootstrap 3 - 为什么行类比它的容器宽？

Question

我刚开始使用 Bootstrap 3。我遇到了困难 了解行类的工作原理。 有没有办法避免 padding-left 和 padding-right？

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

Answer 1

在所有网格系统中，每列之间都有间距。 Bootstrap 的系统在每列的左侧和右侧设置了 15px 的填充以创建此间距。

问题在于，第一列的左侧不应有半个装订线，最后一列的右侧不应有半个装订线。而不是使用某种 .first或 .last像某些网格系统一样在这些列上进行分类，它们改为设置 .row类具有与列的填充相匹配的负边距。这会“拉”出第一列和最后一列的间距，同时使其变宽。

.row div 不应该真正用于保存网格列以外的任何内容。如果是，您将看到内容相对于任何列发生了偏移，这在您的 fiddle 中很明显。

更新:

我回答后你修改了你的问题，所以这里是你现在问的问题的答案:添加 .container第一节课 <div> .参见 working example .