css - 在 Bootstrap 中创建响应式卡片组

<分区>

我正在尝试在 Bootstrap 中创建响应式卡片组。卡片组应在移动设备上每行显示一张卡片，在平板电脑上每行显示 2 张卡片，在桌面设备上每行显示 3 张卡片。

下面是我的代码-

<div class="container">
<div class="card-deck">
    <div class="card mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">1 Card title</h4>
            <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 mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">2 Card title</h4>
            <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="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
    <div class="card mb-4">
        <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">3 Card title</h4>
            <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="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>  
</div>

平板电脑部分似乎不起作用。帮忙？

最佳答案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
        <div class="col-md-6 col-lg-4 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
        <div class="col-md-6 col-lg-4 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
    

        <div class="col-lg-4 col-md-6 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card-deck">
                <div class="card mb-4">
                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                    <div class="card-body">
                    <h4 class="card-title">1 Card title</h4>
                    <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>
        </div>
    </div>
</div>
</body>
</html>

希望对你有帮助

引用链接 https://getbootstrap.com/docs/4.0/layout/grid/

关于css - 在 Bootstrap 中创建响应式卡片组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57192994/

上一篇：css - 在 BOOTSTRAP 导航栏内移动元素

下一篇：html - 闯入 : avoid-column;//not working

相关文章：

html - Bootstrap 列宽比图像宽

javascript - Bootstrap 两个并排模态框

css 表格与 bootstrap 不一致

html - getusermedia - 镜像而不是翻转

html - 为什么有些网站在 iPad 上无法缩放？

css - 如何在样式表中仅针对 IE(任何版本)？

html - 在移动设备上重定向而不是模态

javascript - 只打开一个 Accordion 崩溃，bootstrap

javascript - Bootstrap 容器未正确对齐

css - ul li 菜单下拉菜单不在 ie 中显示