ブートストラップ行の後の4 divで列の問題が発生する

Question

ブートストラップグリッドで、行の後に別のクラスを追加すると、列が乱されます。したがって、この例では、コンテンツは代わりにここでは、2つの等しい列

<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> 

を有することがお互いの下に示されているすべての問題なく動作ブートストラップ3に問題 ここis the live demoとブートストラップ4を用いa live demoあります。

同じ構造だけではない問題は（私はそれを削除することはできません）私は追加する必要がありますrow後<div class="inside">を追加することであるブートストラップ4.

で、ブートストラップ3.xの上で正常に動作します。この問題を解決するソリューションはありますか？

Answer 1

には、以下のCSSを追加します。

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

理由は、ブートストラップ4は今基本的には、ディスプレイの性質を持っている.rowので、グリッドを表示するためにフレックス使用している：フレックス;.あなたは、内側divが動作を複製するようにする必要があります。