html - 行后的 Bootstrap 4 div 导致列出现问题

Question

在 bootstrap 网格中，如果我在行之后添加另一个类，那么列就会乱七八糟。所以在这个例子中，内容显示在彼此下面，而不是有两个相等的列

<div class="row">
     <div class="inside">

       <div class="col-sm-6">
           <p>sample content</p>
       </div>

       <div class="col-sm-6">
          <p>sample content</p>
       </div>

     </div>
</div>

这里是 a live demo使用有问题的 bootstrap 4 在这里 is the live demo使用 bootstrap 3 可以正常工作。

相同的结构在 bootstrap 3.x 上工作正常，只是在 bootstrap 4 上不行。

问题在于添加 <div class="inside">在 row 之后我应该添加(我无法删除它)。有解决此问题的解决方案吗？

Answer 1

添加以下 CSS:

.inside {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
}

原因是Bootstrap 4现在使用flex来显示grid，所以.row基本上有一个属性display: flex;。您只需要使内部 div 复制该行为即可。