Bootstrap 4网格不起作用，列并没有出现

Question

我正在使用以下代码来尝试获取下面的“预期”布局，但是我得到的是灰色的，这是错误的。有人可以告诉我使用Boostrap 4网格系统时我做错了什么吗？

我不明白为什么并排的列会彼此叠置而不是彼此叠置？

我尝试将填充和边距设置为零。

<div class="container">
  <div class="row">
    <div class="col-md-4 col-xs-12">
      1
    </div>
    <div class="col-md-8 col-xs-12">
      <div class="col-md-12">
        <div class="col-md-2">
          2.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            2.21
          </div>
          <div class="col-md-12">
            2.22
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="col-md-2">
          3.1
        </div>
        <div class="col-md-10">
          <div class="col-md-12">
            3.21
          </div>
          <div class="col-md-12">
            3.22
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

添加

<div class="row"></div>

对于每个子容器，如文档中所述：https://getbootstrap.com/docs/4.3/layout/grid/#nesting

Answer 2

postcss-loader