如何獲取引導卡列？

我正在學習Bootstrap框架，並試圖製作一個雙列卡系統，以便捕獲卡的「feed」。根據卡的類型，它將位於左側或右側。我使用Bootstrap與我認爲是12列容器的Bootstrap。容器內有一個6列div和另一個6列div，但無論出於什麼原因，它們都不會分開，所有卡片最終都會成爲一長串卡片。如何獲取引導卡列？

這裏舉例： http://codepen.io/jasonrpan/pen/KaLRdj

<div class="container"> 
<div class="col-md-6"> 
    <div class="card"> 
     <div class="card-block"> 
     <h1 class="card-text good-review-score float-left">8.0</h1> 
     <h4 class="card-title">Card on the Left 1</h4> 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
     <div class="card-footer"> 
     <p class="card-text text-right">Footer Text - Possible Link Out</p> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-block"> 
     <h1 class="card-text good-review-score float-left">8.0</h1> 
     <h4 class="card-title">Card on the Left 2</h4> 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
     <div class="card-footer"> 
     <p class="card-text text-right">Footer Text - Possible Link Out</p> 
     </div> 
    </div> 
</div> 

<div class="col-md-6"> 
    <div class="card"> 
     <div class="card-block"> 
     <h1 class="card-text good-review-score float-left">8.0</h1> 
     <h4 class="card-title">Card on the Right 1</h4> 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
     <div class="card-footer"> 
     <p class="card-text text-right">Footer Text - Possible Link Out</p> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-block"> 
     <h1 class="card-text good-review-score float-left">8.0</h1> 
     <h4 class="card-title">Card on the Right 1</h4> 
     <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
     </div> 
     <div class="card-footer"> 
     <p class="card-text text-right">Footer Text - Possible Link Out</p> 
     </div> 
    </div> 
</div>

好奇爲什麼這可能是什麼？

來源

2017-02-18 pyNovice89