Bootstrap 3 - 为什么行类比它的容器宽? [英] Bootstrap 3 - Why is row class is wider than its container?

问题描述

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

<div class="col-xs-4 .col-xs-offset-1">上校
<div class="col-xs-2">上校

<div class="col-xs-2">上校

<div class="col-xs-2">上校

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

解决方案

在所有网格系统中，每列之间都有间距.Bootstrap 的系统在每列的左侧和右侧设置了一个 15px 的填充来创建这个装订线.

问题是第一列左边不应该有半个装订线，最后一列右边不应该有半个装订线.它们不像某些网格系统那样在这些列上使用某种 .first 或 .last 类，而是将 .row 类设置为具有与列的填充匹配的负边距.这将拉"出第一列和最后一列的排水沟，同时使其更宽.

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

更新:

您在我回答后修改了您的问题，所以这里是您现在提出的问题的答案:将 .container 类添加到第一个

.请参阅工作示例.

I just started using Bootstrap 3. I am having a difficult time understanding how the row class works. Is there a way to avoid the padding-left and 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/

解决方案

In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.

UPDATE:

You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.

这篇关于Bootstrap 3 - 为什么行类比它的容器宽?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！