如何使用固定宽度的卡片制作卡片组?

卡片

关注

发信

关注(28)粉丝(399)

如何使用固定宽度的卡片制作卡片组?

本文介绍了如何使用固定宽度的卡片制作卡片组?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用 Bootstrap 4 制作一个响应式卡片组固定宽度卡片.在这里，我已经发布了下面的代码，但它没有响应.为什么?


<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;"><div class="card-body"><h4 class="card-title">标题 1</h4><p>此处为小文本</p><small class="text-muted">3 分钟前</small>

<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;"><div class="card-body"><h4 class="card-title">标题 2</h4><p>此处为小文本</p><small class="text-muted">3 分钟前</small>

<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;"><div class="card-body"><h4 class="card-title">标题 3</h4><p>此处为小文本</p><small class="text-muted">3 分钟前</small>

<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;"><div class="card-body"><h4 class="card-title">Title 4</h4><p>此处为小文本</p><small class="text-muted">3 分钟前</small>

解决方案

对于带有固定宽度卡片的 Bootstrap 4 卡片组，请执行以下操作:

将每张卡片放入带有 col-auto mb-3 类的列中(自动宽度列 + 带三个单位的边距底部).

要使它们居中，请将 justify-content-center 类添加到行中.

这是一个有效的代码片段(点击下面的运行代码片段"并展开到整页):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="container-fluid mt-4"><div class="row justify-content-center"><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>

I want to make a responsive card deck using Bootstrap 4 fixed-width cards. Here I have posted the code below, but it's not responsive. Why?

<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 1</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 2</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 3</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 4</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>

解决方案

For a Bootstrap 4 card deck with fixed-width cards, do this:

Put each card into a column with the classes col-auto mb-3 (auto-width column + margin-bottom with three units).

To center them, add the justify-content-center class to the row.

Here's a working code snippet (click "run code snippet" below and expand to full page):

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

<div class="container-fluid mt-4">
    <div class="row justify-content-center">
        <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>

这篇关于如何使用固定宽度的卡片制作卡片组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-17 13:33