行的 child 与 bootstrap 网格中的列不同是什么问题？

Question

昨天我正在审查我们的 HTML 结构，发现我们有像这样用作行 child 的容器

<section class="row graySeccion">
  <div class="container py-5 graySeccion">
    <div class="row mb-5">
      <div class="col py-2 text-center">
        <h1>WELCOME TO STEAM SCHOOLS</h1>
      </div>
    </div>

但是看着 oficial documentation 我可以看到这个注释。

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

我们有这个 row->container->row 有多不对，我们可能会破坏哪些东西？
我们应该开始重构我们的 HTML 结构吗？

Answer 1

是的，理想情况下您应该遵循适当的网格布局结构。

row class 包含以下属性:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

由于这个属性 of row 水平滚动条出现在某些分辨率的页面上。为了避免这种情况，我们需要遵循 bootstrap (container->row->col) 的官方文档。

行的 child 与 bootstrap 网格中的列不同是什么问题？

What is the issue having a different child for rows than col on a bootstrap grid?

html

bootstrap-4

bootstrap-grid