ブートストラップレスポンスグリッドは最後の行を中断します

Question

私は8つの資産を持っていますが、ブートストラップを使って2つの行を作成して4つの行に分解します。しかし、行が応答すると、左にある資産は右に設定され、最後の資産は左に新しい行に設定されます。すべてのdivは正確に同じに設定されます。このコードは他のページで動作しているようですが、なぜこのページが壊れているのかわかりません。 See image for visual explanation助けてください！ 2行に分割

<div class="container-fluid"> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="clear"></div> 
</div> 

Answer 1

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
    <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
</div> 
<div class="row"> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
<div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div> 
</div> 

。見てみな。