Question

我正在尝试调整卡片组的大小，我有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>

Answer 1

如果要在页面上显示等宽的卡片，请尝试col-sm-4。您还能详细说明问题的确切原因吗？

Answer 2

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

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

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

如何在引导程序上调整卡的大小

2 个答案: