为什么在.row中使用负边距？

Question

在Flexboxgrid框架中，我看到.row类的margin为-1rem。在小视口中，这会创建容器的小水平滚动条。由于我在其他框架上也看到了这个负边距，那它的目的是什么？内部列具有相同数量的反向填充。在图片中，红线是.container，虚线是.row。顺便说一下，边距只在右侧可见。

- Manaus

Answer 1

因为你应该将它们与列一起使用。

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

在此处查看详细介绍。

以下是“ .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>

- Maharkus

---

这个设计真是太糟糕了...我无法使用任何垂直布局，因为没有使用 flex-direction: column 的组件，但我在任何vuetify网格布局中使用标准的 div 和 flexbox 时都遇到了非常大的困难，因为会添加随机负边距等。 - Bersan

这个设计太糟糕了。- 这是Vuetify！ - Feofilakt

Answer 2

一般情况下，row 放置在 container 中。 container 具有 15 的填充，而 row 具有 -15 的外边距。

- sql_dummy