Bootstrap 4卡片甲板与基于视窗的列数

我正在尝试实现引导程序4中的卡片甲板特性，使我的所有卡片都具有相同的高度。

Bootstrap 提供的示例显示4张漂亮的卡片，但是无论视图端口如何，它都是行中的4张卡片。参见编码 给你。

这对我来说没有意义，因为，我会假设，你想要你的卡缩小到最小尺寸，以便你的内容仍然看起来不错。

然后，我尝试添加一些视窗类来打破屏幕大小，但是一旦添加了 div，卡片甲板就不再适用，因此不会使卡片等高。

我怎样才能做到这一点？这是一个缺失的功能，将在引导程序4的完整版本中解决？

这是小提琴: https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
<footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
<footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes for uppercase and capitalize.</p>
<footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
<footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
<footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
<footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>There are also some interesting new text classes for uppercase and capitalize.</p>
<footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
</blockquote>
</div>
</div>
<div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
<div class="card-block">
<blockquote class="card-blockquote">
<p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
<footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
148430 次浏览
小开
最佳答案

2018年更新

如果需要 响应卡牌组 ，可以使用可见性工具强制在不同的视窗宽度(断点)上包装每个 X 列..。

引导程序4响应 扑克牌 (v 4.1)

Bootstrap 4alpha 2的原始答案:

您可以 使用网格 col-*-*得到不同的宽度(而不是卡片甲板) ，然后设置等高度的协议使用柔性箱。

.row > div[class*='col-'] {
display: flex;
flex:1 0 auto;
}

Http://codeply.com/go/o0kdsg2yx2 (alpha 2)

问题是，w/o 柔性箱启用的 card-deck使用 table-cell，它变得非常难以控制宽度。自引导4阿尔法6，弹性框是默认的，所以额外的 CSS 是不需要的弹性框，和 h-100类可以用来制作全高的卡片: http://www.codeply.com/go/gnOzxd4Spk

相关问题: 引导程序4-在卡片列中响应卡片

小开

下面是 Sass 的一个解决方案，可以根据断点配置每行的卡数: https://codepen.io/migli/pen/OQVRMw

它与 Bootstrap 4 beta 3一起工作得很好

// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;


$grid-gutter-width: 30px !default;


// number of cards per line for each breakpoint
$cards-per-line: (
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5
);


@each $name, $breakpoint in $grid-breakpoints {
@media (min-width: $breakpoint) {
.card-deck .card {
flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
}
}
}

编辑(2019/10)

我研究了另一种使用 水平列表组 + 伸缩工具而不是纸牌的解决方案:

Https://codepen.io/migli/pen/goomylb

将任何类型的元素组织到响应式网格中都是一种简单的解决方案

<div class="container">
<ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<!--= add as many items as you need  =-->
</ul>
</div>

.list-group-item {
width: 95%;
margin: 1% !important;
}


@media (min-width: 576px) {
.list-group-item {
width: 47%;
margin: 5px 1.5% !important;
}
}


@media (min-width: 768px) {
.list-group-item {
width: 31.333%;
margin: 5px 1% !important;
}
}


@media (min-width: 992px) {
.list-group-item {
width: 23%;
margin: 5px 1% !important;
}
}


@media (min-width: 1200px) {
.list-group-item {
width: 19%;
margin: 5px .5% !important;
}
}
小开

我花了一点时间才弄明白这个问题，但是答案是不使用卡牌，而是使用 .row和 .col。

这使得每个屏幕大小的具体规格的一套响应卡: 3卡为 xl,2为 lg和 md,1为 sm和 xs。.my-3将填充物放在顶部和底部，这样它们看起来很漂亮。

mixin postList(stuff)
.row
- site.posts.each(function(post, index){
.col-sm-12.col-md-6.col-lg-6.col-xl-4
.card.my-3
img.card-img-top(src="...",  alt="Card image cap")
.card-body
h5.card-title Card title #{index}
p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
a.btn.btn-primary(href="#") Go somewhere
- })
小开

有一个更简单的解决方案-设置卡片元素的固定高度头和主体。通过这种方式，我们可以使用标准的 boostrap 列网格来设置响应式布局。

下面是我的例子: Http://codeply.com/go/rhdawrsbol

 <div class="card-deck text-center">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card mb-4">
<img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
<div class="card-body" style="height: 20rem">
<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="w-100 d-lg-none mt-4"></div>

我创建了4张卡片，并把这个代码之间的第二个和第三个卡片，尝试这一点。

小开

这个答案适用于那些使用 Bootstrap 4.1 + 的用户，也适用于那些关心 IE 11的用户

卡片甲板不适应可见的卡片数量根据视窗大小。

以上方法可以工作，但不支持 IE。使用以下方法，您可以实现类似的功能和响应卡。

您可以管理要在不同断点中显示/隐藏的卡片数量。

在 Bootstrap 4.1 + 中，默认情况下列的高度是相同的，只要确保卡片/内容使用了所有可用的空间。 运行代码片段，你就会明白了

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 mb-3">
<div class="card mb-3 h-100">


<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 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 class="col-sm-6 col-lg-4 mb-3">
<div class="card mb-3 h-100">
<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 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 class="col-sm-6 col-lg-4 mb-3">
<div class="card mb-3 h-100">
<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 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>

小开

我通过在卡片上加入 min-width来实现这一点:

<div class="card mb-3" style="min-width: 18rem;">
<p>Card content</p>
</div>

卡片不会低于这个宽度，但仍然适当地填充每一行，并有相同的高度。

小开

我已经用 CSS 网格来解决这个问题。 CSS 网格将使所有元素在同一行中，所有相同的高度。

不过我还没有研究如何让所有行中的所有元素都保持相同的高度。

无论如何，这里是它可以做到这一点:

HTML:

<div class="grid-container">


<div class="card">...</div>
<div class="card">...</div>
</div>

CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这是一个完整的 JSFiddle。 Https://jsfiddle.net/bluegrounds/owjvhstq/4/

小开

根据 viewport 按最小宽度定义列:


/* Number of Cards by Row based on Viewport */
@media (min-width: 576px) {
.card-deck .card {
min-width: 50.1%; /* 1 Column */
margin-bottom: 12px;
}
}


@media (min-width: 768px) {
.card-deck .card {
min-width: 33.4%;  /* 2 Columns */
}
}


@media (min-width: 992px) {
.card-deck .card {
min-width: 25.1%;  /* 3 Columns */
}
}


@media (min-width: 1200px) {
.card-deck .card {
min-width: 20.1%;  /* 4 Columns */
}
}
小开

@ Zim 在上面提供了一个很好的解决方案(值得我投赞成票) ，然而，它并不完全符合我的需要，因为我正在 Jekyll 中实现这一点，并希望我的卡片甲板自动更新每次我添加一个帖子到我的网站。在 Jekyll，每发一张新帖子，都会形成一副这样的牌，挑战在于如何正确地放置断点。我的解决方案利用了额外的液体标签和模数学。

虽然这个问题已经很老了，但我偶然发现它很有用，也许有一天会有人想和 Jekyll 一起做这件事。

<div class = "container">
<div class = "card-deck">


{% for post in site.posts %}
<div class = "card border-0 mt-2">
<a href = "\{\{ post.url }}"><img src = "\{\{ site.baseurl }}\{\{ post.image }}" class = "mx-auto" alt = "..."></a>
<div class = "card-body">
<h5 class = "card-title"><a href = "\{\{ post.url }}">\{\{ post.title }}</a></h5>
<span>Published: \{\{ post.date | date_to_long_string }} </span>
<p class = "text-muted">\{\{ post.excerpt }}</p>
</div>
<div class = "card-footer bg-white border-0"><a href = "\{\{ post.url }}" class = "btn btn-primary">Read more</a></div>
</div>


<!-- Use modulo to add divs to handle break points -->
{% assign sm = forloop.index | modulo: 2 %}
{% assign md = forloop.index | modulo: 3 %}
{% assign lg = forloop.index | modulo: 4 %}
{% assign xl = forloop.index | modulo: 5 %}


{% if sm == 0 %}
<div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
{% endif %}


{% if md == 0 %}
<div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
{% endif %}


{% if lg == 0 %}
<div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
{% endif %}


{% if xl == 0 %}
<div class="w-100 d-none d-xl-block"><!-- wrap every 5 on xl--></div>
{% endif %}


{% endfor %}
</div>
</div>

这整个代码块可以直接用在一个网站或保存在您的 Jekyll 项目 _includes文件夹。

小开

使用 Bootstrap 4.4.1，我能够通过在混合中添加一些 scss，使用简单的类来设置每副牌的牌数。

超文本标示语言

<div class="card-deck deck-1 deck-md-2 deck-lg-3">
<div class="card">
<h2 class="card-header">Card 1</h3>
<div class="card-body">
Card body
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card">
<h2 class="card-header">Card 2</h3>
<div class="card-body">
Card body
</div>
<div class="card-footer">
Card footer
</div>
</div>
<div class="card">
<h2 class="card-header">Card 3</h3>
<div class="card-body">
Card body
</div>
<div class="card-footer">
Card footer
</div>
</div>
</div>

SCSS

// _card_deck_columns.scss
// add deck-X and deck-BP-X classes to select the number of cards per line
@for $i from 1 through $grid-columns {
.deck-#{$i} > .card {
$percentage: percentage(1 / $i);
@if $i == 1 {
$width: $percentage;
flex-basis: $width;
max-width: $width;
margin-left: 0;
margin-right: 0;
} @else {
$width: unquote("calc(#{$percentage} - #{$grid-gutter-width})");
flex-basis: $width;
max-width: $width;
}
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-up($breakpoint) {
@for $i from 1 through $grid-columns {
.deck#{$infix}-#{$i} > .card {
$percentage: percentage(1 / $i);
@if $i == 1 {
$width: $percentage;
flex-basis: $width;
max-width: $width;
margin-left: 0;
margin-right: 0;
} @else {
$width: unquote("calc(#{$percentage} - #{$grid-gutter-width})");
flex-basis: $width;
max-width: $width;
margin-left: $grid-gutter-width / 2;
margin-right: $grid-gutter-width / 2;
}
}
}
}
}

CSS

.deck-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px); }


.deck-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px); }


.deck-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px); }


.deck-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px); }


.deck-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px); }


.deck-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px); }


.deck-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px); }


.deck-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px); }


.deck-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px); }


.deck-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px); }


.deck-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px); }


.deck-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


@media (min-width: 576px) {
.deck-sm-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-sm-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-sm-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; } }
@media (min-width: 768px) {
.deck-md-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-md-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-md-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; } }
@media (min-width: 992px) {
.deck-lg-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-lg-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-lg-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; } }
@media (min-width: 1200px) {
.deck-xl-1 > .card {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0; }


.deck-xl-2 > .card {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-3 > .card {
flex-basis: calc(33.3333333333% - 30px);
max-width: calc(33.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-4 > .card {
flex-basis: calc(25% - 30px);
max-width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-5 > .card {
flex-basis: calc(20% - 30px);
max-width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-6 > .card {
flex-basis: calc(16.6666666667% - 30px);
max-width: calc(16.6666666667% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-7 > .card {
flex-basis: calc(14.2857142857% - 30px);
max-width: calc(14.2857142857% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-8 > .card {
flex-basis: calc(12.5% - 30px);
max-width: calc(12.5% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-9 > .card {
flex-basis: calc(11.1111111111% - 30px);
max-width: calc(11.1111111111% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-10 > .card {
flex-basis: calc(10% - 30px);
max-width: calc(10% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-11 > .card {
flex-basis: calc(9.0909090909% - 30px);
max-width: calc(9.0909090909% - 30px);
margin-left: 15px;
margin-right: 15px; }


.deck-xl-12 > .card {
flex-basis: calc(8.3333333333% - 30px);
max-width: calc(8.3333333333% - 30px);
margin-left: 15px;
margin-right: 15px; } }

提交答案