html之如何获取 Bootstrap 卡列

我正在学习 Bootstrap 框架，并试图制作一个两列卡片系统以允许捕获卡片的“馈送”。根据卡的类型，它将位于左列或右列。我将 Bootstrap 与我认为是 12 列容器的东西一起使用。容器内有一个 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> 

想知道为什么会这样吗？

请您参考如下方法:

基于 https://v4-alpha.getbootstrap.com/layout/grid/您必须在列周围添加一个带有类行的 div。

此处示例:http://codepen.io/Spreadyy/pen/aprrBG .

<div class="row">