如何获取引导卡列？答案

【问题标题】：How to Get Bootstrap Card Columns?如何获取引导卡列？
【发布时间】：2017-02-19 07:47:38
【问题描述】：

我正在学习 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>

很好奇为什么会这样？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

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

<div class="row">

【讨论】：

啊！非常感谢。也感谢您返回文档。

【解决方案2】：

列总是必须在row...

行是列的水平组，可确保您的列正确排列。我们在 .row 上使用负边距方法来确保您的所有内容都在左侧正确对齐。内容应该放在列内，并且只有列可以是直接的行的子级。

http://www.codeply.com/go/4GRZdVJ4KM

【讨论】：