为什么.row中有负值？

Question

在Flexboxgrid框架中，我看到margin of -1rem在.row类上。在小视图中，这将创建容器的小水平滚动。

既然我在其他框架上看到了这种负面影响，它的目的是什么？内列有相同数量的填充物，相反。

在图片中，红线是.container，虚线是.row。顺便说一下，边距只在右边可见。

​

​

Answer 1

，因为您应该将它们与列结合使用。

列通常有一个padding来将它们的内容从边框中推开，以使其看起来更好看。但是，当您在列中嵌套列时，内容一直被向内推送，这基本上不是期望的效果。为了防止这种情况发生，行有一个负的边距，这会使列向后。在您的示例中，您似乎需要在col-xs-12的列组周围添加一个row。这将防止内容被拖得太远。

看看这里，了解一个解释得很好的介绍。

下面是.row类如何工作的演示：

​

.col1 {
  background: red;
}

.col2 {
  background: green;
}

body {
  font-family: sans-serif;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">

<div class="row">
  <div class="col-xs-12
                col1">
    <div class="col-xs-12
                col2">
      <div class="box">Without a row</div>
    </div>
  </div>
</div>

<br>
<div class="row">
  <div class="col-xs-12
                col1">
    <div class="row">
      <div class="col-xs-12
                col2">
        <div class="box">With a row</div>
      </div>
    </div>
  </div>
</div>

​

Answer 2

通常，row放在container中。container有15的填充，row有-15的边缘