为什么.row中的负利润率？

Question

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

由于我在其他框架上看到了这种负面利润，它的目的是什么？内柱具有相同数量的填充，反转。

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

Answer 1

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

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

请查看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>

Answer 2

通常将{{ encore_entry_script_tags('select2', null, 'admin') }} 放在{% extends '@SonataAdmin/CRUD/base_edit.html.twig' %} {% block javascripts %} {{ parent() }} <script src="{{ asset('build/admin/admin-state-disaster-scenario.js', 'admin') }}"></script> {% endblock %} 中。 row的边距为container，container的边距为15