Bootstrap 4网格系统布局无法在Safari上运行

Question

只需打开Firefox或其他链接，然后使用Safari。 https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_ex&stacked=h

代码：

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Three equal width columns! Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col" style="background-color:lavender;">.col</div>
    <div class="col" style="background-color:orange;">.col</div>
    <div class="col" style="background-color:lavender;">.col</div>
  </div>
</div>

在safari上发生的情况是3个cols出现在彼此之下，而在其他浏览器上它们出现在相同的行块中。

如何修复Safari问题？