我正在尝试在bootstrap 4中实现卡片组功能,以使我的所有卡片都具有相同的高度.
bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请参阅codeply here.
这对我来说没有意义,因为我认为,您希望卡的最小尺寸缩小到适合您的内容仍然看起来不错.
然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.
我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 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,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>
解决方法
2018年更新
如果您想要一个响应式卡片组,请使用visibility utils强制在不同视口宽度(断点)上每X列包裹一次…
Bootstrap 4 responsive card-deck(v 4.0.0)
Bootstrap 4 alpha 2的原始答案：
您可以使用网格col – * – *来获得不同的宽度(而不是卡片组),然后使用flexBox将相等的高度设置为cols.
.row > div[class*='col-'] {
display: flex;
flex:1 0 auto;
}
http://codeply.com/go/O0KdSG2YX2(阿尔法2)
问题是w / o flexBox启用了卡片组使用表格单元格,因此很难控制宽度.从Bootstrap 4 Alpha 6开始,flexBox是默认的,因此flexBox不需要额外的CSS,而h-100类可用于使卡片全高：http://www.codeply.com/go/gnOzxd4Spk
