首页
前端开发
Bootstrap 4:卡片作为具有相同高度和宽度的网格

Bootstrap 4:卡片作为具有相同高度和宽度的网格 [英] Bootstrap 4: cards as grid with the same height and width

查看：24 发布时间：2021/12/24 9:37:03 html css twitter-bootstrap bootstrap-4

本文介绍了Bootstrap 4:卡片作为具有相同高度和宽度的网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在具有相同高度和宽度的网格中订购卡片.这些卡片将具有不同大小的不同内容.他们也应该在每行中增加 3 个.每行有不同的高度是可以的，但行内的高度应该相同.整个网格中每张卡片的宽度应该相同.


<div class="row align-items-stretch justify-content-start card-deck"><div class="card"><div class="card-body"><div class="card-text">卡1

<div class="card"><div class="card-body"><div class="card-text">卡 1 sasdddddddddddddddddd asdd asdd as dassssssssssssssssssssssss

<div class="card"><div class="card-body"><div class="card-text">卡1

<div class="w-100">

<div class="card"><div class="card-body"><div class="card-text">卡1

小提琴:

我发现当前小提琴有问题:

行之间没有空格
卡片每行的宽度不同

所以 card-deck 似乎不足以解决问题.有什么简单的方法吗?

解决方案

您可以简单地定义卡片的宽度(在下面的示例中为style="width: 18rem;")，然后使用列的 col-auto 类加上诸如 mb-3(margin-bottom 3 个单位)之类的东西，用于底部的边距.而已.

如果您想将它们整齐地居中对齐，您可以将 justify-content-center 添加到行中.或者，如果您更喜欢 justify-content-between 类，也可以试试.

我正在下面添加第二个版本...

这是一个有效的代码片段:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><div class="container mt-4"><div class="row"><div class="col-auto mb-3"><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">卡片标题</h5><h6 class="card-subtitle mb-2 text-muted">卡片字幕</h6><p class="card-text">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="card-link">卡片链接</a><a href="#" class="card-link">另一个链接</a>

<div class="col-auto mb-3"><div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">卡片标题</h5><h6 class="card-subtitle mb-2 text-muted">卡片字幕</h6><p class="card-text">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="card-link">卡片链接</a><a href="#" class="card-link">另一个链接</a>

第二个版本:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><div class="container mt-3"><div class="row"><div class="card-deck"><div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/abc" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张较长的卡片 <br>与 <br>支持<br>下面的文字<br>作为额外内容的自然引导.这个内容有点长.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/bca" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/bb4" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张更宽的卡片，下面的支持文本是附加内容的自然引导.这个<br>卡<br>有 <br>甚至更长<br>内容 <br>比 <br>第一个<br>显示 <br>那个等高的动作.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/54a" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张较长的卡片 <br>与 <br>支持<br>下面的文字<br>作为额外内容的自然引导.这个内容有点长.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/f0a" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/aa0" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张更宽的卡片，下面的支持文本是附加内容的自然引导.这个<br>卡<br>有 <br>甚至更长<br>内容 <br>比 <br>第一个<br>显示 <br>那个等高的动作.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/f00" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张较长的卡片 <br>与 <br>支持<br>下面的文字<br>作为额外内容的自然引导.这个内容有点长.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/090" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这张卡片下面有支持文本，作为对附加内容的自然引导.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

<div class="card mb-4" style="min-width: 18rem; max-width: 18rem;"><img class="card-img-top" src="https://placehold.it/280x140/ff0" alt="卡片图片上限"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是一张更宽的卡片，下面的支持文本是附加内容的自然引导.这个<br>卡<br>有 <br>甚至更长<br>内容 <br>比 <br>第一个<br>显示 <br>那个等高的动作.</p><p class="card-text"><small class="text-muted">上次更新时间为 3 分钟前</small></p>

I'm trying to order cards in a grid with the same height and width. These cards will have different content with different sizes. They should also go by 3 in each row. It is OK for each row to have different height, but the height should be the same within the row. The width of each card should be the same for the whole grid.

<div class="container">
  <div class="row align-items-stretch justify-content-start card-deck">
   <div class="card">
     <div class="card-body">
      <div class="card-text">
        Card 1
      </div>
     </div>
   </div>
   <div class="card">
     <div class="card-body">
      <div class="card-text">
        Card 1 sasddddddddddddddddd asdd as dassssssssssssssssssssssssss
      </div>
     </div>
   </div>
   <div class="card">
     <div class="card-body">
      <div class="card-text">
        Card 1
      </div>
     </div>
   </div>
   <div class="w-100">

   </div>
   <div class="card">
     <div class="card-body">
      <div class="card-text">
        Card 1
      </div>
     </div>
   </div>
   <div class="card">
     <div class="card-body">
      <div class="card-text">
        Card 1
      </div>
     </div>
   </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/q9gp76kL/

The result layout I'd like to receive:

I see issues with current fiddle:

There is no space between the rows
The cards have different width for each row

So card-deck seems to not enough to do the trick. Is there any easy way around?

解决方案

You can simply define the width of a card (style="width: 18rem;" in the example below) and then use the col-auto class for the columns plus the something like mb-3 (margin-bottom 3 units) for a margin at the bottom. That's it.

And if you wanted to center-align them neatly, you could add the justify-content-center to the row. Or maybe try the justify-content-between class if you like that better.

Edit:

I'm adding a second version further down below...

Here's a working code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-4">
    <div class="row">
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="col-auto mb-3">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>
</div>

Second version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-3">
    <div class="row">
        <div class="card-deck">
            <div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/abc" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/bca" 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/bb4" 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 <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/54a" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/f0a" 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/aa0" 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 <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/f00" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card <br> with <br> supporting <br> text below <br> 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/090" 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 mb-4" style="min-width: 18rem; max-width: 18rem;">
                <img class="card-img-top" src="https://placehold.it/280x140/ff0" 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 <br> card <br> has <br> even longer <br> content <br> than <br> the first <br> to show <br> that equal height action.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>

这篇关于Bootstrap 4:卡片作为具有相同高度和宽度的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

Bootstrap 4:卡片作为具有相同高度和宽度的网格 [英] Bootstrap 4: cards as grid with the same height and width

问题描述

第二个版本:

Edit:

Second version:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Bootstrap 4:卡片作为具有相同高度和宽度的网格 [英] Bootstrap 4: cards as grid with the same height and width

问题描述

第二个版本:

Edit:

Second version:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭