Html Bootstrap 4 - 卡片列中的响应卡片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34140793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - Responsive cards in card-columns
提问by davideghz
I'm playing with Bootstrap 4 and I can't find a solution to add responsiveness to cards while in a divwith class="card-columns"(this class applies a Masonry-like effect to the cards inside the div having this class).
我正在使用 Bootstrap 4，但找不到在divwith 中为卡片添加响应的解决方案class="card-columns"（此类将类似砌体的效果应用于具有此类的 div 内的卡片）。
In Bootstrap 3 it was easyto style and make "cards" responsive since it was possible to apply something like class="col-md-3 col-sm-6 col-xs-12"to a div containing thumbnail, caption, etc.
在引导3是容易的款式，让“卡”响应，因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个div thumbnail，caption等等。
How to have the same effect while using cards in Bootstrap 4?
在 Bootstrap 4 中使用卡片时如何获得相同的效果？
Here is the HTML:
这是 HTML：
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 hidden-sm-down" id="map_container">
<p>here we put the map</p>
</div>
<div class="col-md-8 col-sm-12 right_box">
<div class="row">
// here there's code for navbar
</div><!-- row -->
<div class=row">
<div class="card-columns">
<?php
// Create and check connection
if ($result->num_rows > 0) {
// output card design
while($row = $result->fetch_assoc()) {
echo '<div class="card">
<img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
<div class="card-block">
<h4 class="card-title">' . $row["name"] . '</h4>
<p class="card-text">Text. Card content.</p>
</div>
<div class="card-footer text-muted">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li>14</li>
</ul>
</div>
</div><!-- card -->';
}
} else {
echo "0 results";
}
$conn->close();
?>
</div><!-- container card-columns -->
</div><!-- row -->
</div><!-- col-md-8 right_box -->
</div><!-- row -->
</div><!-- container-fluid -->
</body>
And here is the CSS I've used:
这是我使用的 CSS：
#map_container {
background-image: url(map.png);
height: 100vh;
}
.right_box {
-webkit-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
}
.card {
border-radius: 0 !important;
border: 0 none;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
margin-left: 1px;
margin-right: 1px;
}
.card-img-top {
width: 100%;
border-radius: 0 !important;
}
.card-columns {
padding-top: 15px;
}
Given below are two images to make my situation clearer:
下面给出两张图片，使我的情况更清楚：
I'd like cards to stack up vertically on smaller screens.
我希望卡片在较小的屏幕上垂直堆叠。
Thanks for your suggestions!
感谢您的建议！
采纳答案by Faheel
Bootstrap 4 (4.0.0-alpha.2) uses the css property column-countin the card-columnsclass to define how many columns of cards would be displayed inside the divelement.
But this property has only two values:
引导4（4.0.0-alpha.2）使用CSS属性column-count的card-columns类定义如何的卡多列将里面显示div元素。
但是这个属性只有两个值：
- The default value 1for small screens (
max-width: 34em) - The value 3for all other sizes (
min-width: 34em)
- 小屏幕的默认值1(
max-width: 34em) - 所有其他尺寸的值3(
min-width: 34em)
Here's how it is implemented in bootstrap.min.css:
下面是它在bootstrap.min.css 中的实现方式：
@media (min-width: 34em) {
.card-columns {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
?
}
?
}
To make the card stacking responsive, you can add the following media queries to your cssfile and modify the values for min-widthas per your requirements :
为了使卡片堆叠响应，您可以将以下媒体查询添加到您的css文件并min-width根据您的要求修改值：
@media (min-width: 34em) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 48em) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media (min-width: 62em) {
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 75em) {
.card-columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
回答by Zim
Update 2019 - Bootstrap 4
2019 年更新 - Bootstrap 4
You can simply use the SASS mixin to change the number of cards across in each breakpoint / grid tier.
您可以简单地使用 SASS mixin 来更改每个断点/网格层中的卡片数量。
.card-columns {
@include media-breakpoint-only(xl) {
column-count: 5;
}
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(md) {
column-count: 3;
}
@include media-breakpoint-only(sm) {
column-count: 2;
}
}
SASS Demo: http://www.codeply.com/go/FPBCQ7sOjX
SASS 演示：http: //www.codeply.com/go/FPBCQ7sOjX
Or, CSS onlylike this...
或者，CSS 只是这样...
@media (min-width: 576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 4;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 5;
}
}
CSS-only Demo: https://www.codeply.com/go/FIqYTyyWWZ
纯 CSS 演示：https: //www.codeply.com/go/FIqYTyyWWZ
回答by Anjana Silva
I have created a Cards Layout - 3 cards in a row using Bootstrap 4 / CSS3 (of course its responsive). The following example uses basic Bootstrap 4 classes such as container, row, col-x, list-groupand list-group-item. Thought to share here if someone is interested in this sort of a layout.
我创建了一个卡片布局 - 使用 Bootstrap 4 / CSS3（当然它的响应式）连续 3 张卡片。下面的示例使用基本自举4类，例如container，row，col-x，list-group和list-group-item。如果有人对这种布局感兴趣，想在这里分享。
HTML
HTML
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="custom-column">
<div class="custom-column-header">Header</div>
<div class="custom-column-content">
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
<li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
<li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
<li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
<li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
</ul>
</div>
<div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="custom-column">
<div class="custom-column-header">Header</div>
<div class="custom-column-content">
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
<li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
<li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
<li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
<li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
</ul>
</div>
<div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="custom-column">
<div class="custom-column-header">Header</div>
<div class="custom-column-content">
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
<li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
<li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
<li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
<li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
</ul>
</div>
<div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
</div>
</div>
</div>
</div>
CSS / SCSS
CSS / SCSS
$primary-color: #ccc;
$col-bg-color: #eee;
$col-footer-bg-color: #eee;
$col-header-bg-color: #007bff;
$col-content-bg-color: #fff;
body {
background-color: $primary-color;
}
.custom-column {
background-color: $col-bg-color;
border: 5px solid $col-bg-color;
padding: 10px;
box-sizing: border-box;
}
.custom-column-header {
font-size: 24px;
background-color: #007bff;
color: white;
padding: 15px;
text-align: center;
}
.custom-column-content {
background-color: $col-content-bg-color;
border: 2px solid white;
padding: 20px;
}
.custom-column-footer {
background-color: $col-footer-bg-color;
padding-top: 20px;
text-align: center;
}
回答by safrazik
If you are using Sass:
如果您使用的是 Sass：
$card-column-sizes: (
xs: 2,
sm: 3,
md: 4,
lg: 5,
);
@each $breakpoint-size, $column-count in $card-column-sizes {
@include media-breakpoint-up($breakpoint-size) {
.card-columns {
column-count: $column-count;
column-gap: 1.25rem;
.card {
display: inline-block;
width: 100%; // Don't let them exceed the column width
}
}
}
}
回答by buildpax
I realize this question was posted a while ago; nonetheless, Bootstrap v4.0 has card layout support out of the box. You can find the documentation here: Bootstrap Card Layouts.
我意识到这个问题是不久前发布的；尽管如此，Bootstrap v4.0 具有开箱即用的卡片布局支持。您可以在此处找到文档：Bootstrap Card Layouts。
I've gotten back into using Bootstrap for a recent project that relies heavily on the card layout UI. I've found success with the following implementation across the standard breakpoints:
我最近在一个严重依赖卡片布局 UI 的项目中重新开始使用 Bootstrap。我发现通过标准断点的以下实现取得了成功：
<link href="https://unpkg.com/[email protected]/css/tachyons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center" id="cars" v-cloak>
<!-- RELEVANT MARKUP BEGINS HERE -->
<div class="container mh0 w-100">
<div class="page-header text-center mb5">
<h1 class="avenir text-primary mb-0">Cars</h1>
<p class="text-secondary">Add and manage your cars for sale.</p>
<div class="header-button">
<button class="btn btn-outline-primary" @click="clickOpenAddCarModalButton">Add a car for sale</button>
</div>
</div>
<div class="container pa0 flex justify-center">
<div class="listings card-columns">
<div class="card mv2">
<img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
alt="Mazda hatchback">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
buttons here
</div>
</div>
<div class="card mv2">
<img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
alt="Mazda hatchback">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
buttons here
</div>
</div>
<div class="card mv2">
<img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
alt="Mazda hatchback">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
buttons here
</div>
</div>
<div class="card mv2">
<img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
alt="Mazda hatchback">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
buttons here
</div>
</div>
<div class="card mv2">
<img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
alt="Mazda hatchback">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
buttons here
</div>
</div>
</div>
</div>
</div>
</div>After trying both the Bootstrap .card-groupand .card-deckcard layout classes with quirky results at best across the standard breakpoints, I finally decided to give the .card-columnsclass a shot. And it worked!
在尝试了 Bootstrap.card-group和.card-deck卡片布局类之后，在标准断点上充其量也得到了奇怪的结果，我终于决定试一试这个.card-columns类。它奏效了！
Your results may vary, but .card-columnsseems to be the most stable implementation here.
您的结果可能会有所不同，但.card-columns似乎是这里最稳定的实现。
回答by Jake Conkerton-Darby
Another late answer, but I was playing with this and came up with a general purpose Sass solution that I found useful and many others might as well. To give an overview, this introduces new classes that can modify the column count of a .card-columnselement in very similar ways to columns with .col-4or .col-lg-3:
另一个迟到的答案，但我正在玩这个并提出了一个通用的 Sass 解决方案，我发现它很有用，许多其他解决方案也可能如此。为了提供概述，这引入了新的类，这些类可以.card-columns以非常类似于带有.col-4或 的列的方式修改元素的列数.col-lg-3：
@import "bootstrap";
$card-column-counts: 1, 2, 3, 4, 5;
.card-columns {
@each $column-count in $card-column-counts {
&.card-columns-#{$column-count} {
column-count: $column-count;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $column-count in $card-column-counts {
&.card-columns#{$infix}-#{$column-count} {
column-count: $column-count;
}
}
}
}
}
The end result of this is if you have the following:
这样做的最终结果是，如果您有以下情况：
<div class="card-columns card-columns-2 card-columns-md-3 card-columns-xl-4">
...
</div>
Then you would have 2 columns by default, 3 for medium devices and up and 4 for xl devices and up. Additionally if you change your grid breakpoints this will automatically support those, and the $card-column-countscan be overridden to change the allowed numbers of columns.
那么默认情况下您将有 2 列，3 列用于中型设备及以上，4 列用于 xl 设备及以上。此外，如果您更改网格断点，这将自动支持这些断点，并且$card-column-counts可以覆盖以更改允许的列数。
