如何在 Bootstrap 4 的卡片组中设置每行卡片的数量答案

【问题标题】：How to set number of cards per row in card-deck in Bootstrap 4如何在 Bootstrap 4 的卡片组中设置每行卡片的数量
【发布时间】：2019-12-17 00:43:59
【问题描述】：

我正在寻找解决方案，在引导程序中设置卡片组中每行卡片的数量。

例如，我想每行有两张卡片：

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

【问题讨论】：

标签： css bootstrap-4 bootstrap-cards

【解决方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
 
<div class="card-deck row">
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
    Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
          Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

【讨论】：

“我希望每行有两张卡片” - 你错过了吗？如果您解释您所做的更改及其原因，而不是仅仅转储代码，将会很有帮助。
您可以使用 class col-sm-6 在一行中添加两张卡片

【解决方案2】：

这是你想要的吗？？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
  <div class="card col-sm-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
  </div>
</div>

【讨论】：

完美！并且有可能在卡片之间添加间隙？

【解决方案3】：

我希望你想要这样：并且您想要更多卡片之间的间隙，您将类 .md-3 更改为 .md-4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
   <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div> <div class="col-sm-6">
  <div class="card my-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Card text
      </p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Card footer text</small>
    </div>
    </div>
  </div>
</div>

【讨论】：

@profiler 这个上面的例子我在卡片之间添加了间隙。