Почему отрицательная маржа в.row?

Question

В рамках Flexboxgrid я вижу margin из -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