为什么 .row 中的边距为负？答案

【问题标题】：Why negative margin in .row?为什么 .row 中的边距为负？
【发布时间】：2017-11-28 11:23:23
【问题描述】：

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

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

图中红线为.container，虚线为.row。顺便说一句，边距仅在右侧可见。

【问题讨论】：

【解决方案1】：

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

列通常有一个padding 将它们的内容推离边界，以使其看起来更好。但是，当您在列中嵌套列时，内容会不断向内推，这通常不是预期的效果。为了防止这种情况发生，行有一个负边距，这会将列拉回来。在您的情况下，您似乎需要在 rows 内的列组周围添加一个 col-xs-12 。这将防止内容被拉得太远。

查看here 以获得详细解释的介绍。

下面是 .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>

【讨论】：

这设计太糟糕了......我不能使用任何垂直布局，因为没有使用flex-direction: column的组件，但我也很难使用标准div任何 vuetify 网格布局中的 flexbox，因为它会添加随机负边距等，
>这设计太糟糕了。 - 是 Vuetify！

【解决方案2】：

一般row放在container中。 container 的边距为 15，row 的边距为 -15

【讨论】：