如何在引导程序上调整卡片大小答案

【问题标题】：How to Size the Cards on bootstrap如何在引导程序上调整卡片大小
【发布时间】：2020-04-21 15:21:40
【问题描述】：

我正在尝试调整卡片组的大小，我有 3 张卡片，我正在尝试将它们调整为 col-3 但它不起作用，我使用的是 bootstrap 4.1x 版本，我不知道我的代码有什么问题

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck" style="margin-bottom: 20px;">
        <div class="card col-sm-3">
          <img class="card-img-top" src="https://images.pexels.com/photos/1181316/pexels-photo-1181316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card col-sm-3">
          <img class="card-img-top" src="https://images.pexels.com/photos/2277784/pexels-photo-2277784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card col-sm-3">
          <img class="card-img-top" src="https://images.pexels.com/photos/1181605/pexels-photo-1181605.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        <img src="..." alt="..." class="rounded-circle">
        <img src="..." alt="..." class="rounded-circle">
        <img src="..." alt="..." class="rounded-circle">
        </div>

【问题讨论】：

它在您的页面中的外观如何？我试图为您的代码制作一个 jsfiddle，它看起来很好 jsfiddle.net/1kgn5a8w
您希望使用 col-3 得到什么样的输出？请详细说明一下好吗？

标签： html web design-patterns bootstrap-4

【解决方案1】：

如果您尝试在页面上显示等宽的卡片，请尝试col-sm-4。能否详细说明一下具体是什么问题？

【讨论】：

【解决方案2】：

你可以为不同的分辨率使用不同的颜色

class="card col-sm-4 col-md-4 col-lg-4"

而且您只连续显示 3 张卡片，因此如果乘以 4，您将得到 12，这是最大 col 值，因此它将在您的页面上平均显示。

【讨论】：