在col-sm-6内的Bootstrap 4 col-sm-6无法正常工作

我试图将div与class一起使用，col-sm-6并尝试使用col-sm-6and col-sm-6class将其再次划分为12个网格。但是，它似乎不起作用。col-sm-6内部col-sm-6占据父对象的整个宽度，而不是应保持其宽度的50％。

该模式曾经在Bootstrap 3中很好用，但在Bootstrap 4中似乎不起作用。

Bootstrap 3--工作原理：https : //codepen.io/vishalgulati/pen/axMNRz

Bootstrap 4-它不起作用-https: //codepen.io/vishalgulati/pen/KYEzxr

两者使用相同的代码：

  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">
        <div class="col-sm-6" style="background-color:red;">25%</div>
        <div class="col-sm-6" style="background-color:pink;">25%</div>
      </div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
</div>