- 首页
- 前端开发
- Bootstrap 4 卡片组，列数基于视口
Bootstrap 4 卡片组，列数基于视口
[英] Bootstrap 4 card-deck with number of columns based on viewport
本文介绍了Bootstrap 4 卡片组，列数基于视口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在引导程序 4 中实现卡片组功能，以使我的所有卡片具有相同的高度.
bootstrap 提供的示例显示了 4 张漂亮的卡片，但无论视口如何，它都是 4 张卡片.查看代码此处.
这对我来说没有意义，因为我假设您希望卡片的最小尺寸缩小到让您的内容看起来仍然不错.
然后我尝试添加一些视口类以打破屏幕尺寸，但是一旦添加了该 div，卡片组就不再适用，因此不会使卡片等高.
我怎样才能做到这一点?这是一个缺失的功能，将在 Bootstrap 4 的完整版本中解决吗?
这是小提琴:https://jsfiddle.net/crrm5q9m/
<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>新的 Bootstrap 4 现在支持 CSS 3 flexbox，真是个好消息.</p><footer>制作灵活的布局<cite title="Source Title">更快</cite></footer></blockquote>
<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>之前称为Panel"的 Bootstrap 3.x 元素现在称为Card".</p><footer>所有这些都让<cite title="Source Title">意义</cite></footer></blockquote>
<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>还有一些有趣的新文本类用于大写和大写.</p><footer>这些方便的实用程序使它<cite title="Source Title">简单</cite></footer></blockquote>
<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>如果您想在 Bootstrap 4 中使用很酷的图标，您必须找到自己的图标，例如 Font Awesome 或 Ionicons.</p><footer>Glyphicons 不是 <cite title="Source Title">Included</cite></footer></blockquote>
<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>新的 Bootstrap 4 现在支持 CSS 3 flexbox，真是个好消息.</p><footer>制作灵活的布局<cite title="Source Title">更快</cite></footer></blockquote>
<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>之前称为Panel"的 Bootstrap 3.x 元素现在称为Card".</p><footer>所有这些都让<cite title="Source Title">意义</cite></footer></blockquote>
<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>还有一些有趣的新文本类用于大写和大写.</p><footer>这些方便的实用程序使它<cite title="Source Title">简单</cite></footer></blockquote>
<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>如果您想在 Bootstrap 4 中使用很酷的图标，您必须找到自己的图标，例如 Font Awesome 或 Ionicons.</p><footer>Glyphicons 不是 <cite title="Source Title">Included</cite></footer></blockquote>
解决方案
2018 年更新
如果您想要一个响应式卡片组，使用可见性工具在不同的视口宽度(断点)上强制换行每 X 列...
Bootstrap 4 响应式 card-deck (v 4.1)
<小时>Bootstrap 4 alpha 2 的原始答案:
您可以使用网格 col-*-* 来获得不同的宽度(而不是卡片组)，然后使用 flexbox 为 cols 设置相等的高度.
.row >div[class*='col-'] {显示:弹性；弹性:1 0 自动；}
http://codeply.com/go/O0KdSG2YX2(alpha 2)
问题是不启用 flexbox 的 card-deck 使用 table-cell 在那里很难控制宽度.从 Bootstrap 4 Alpha 6 开始，flexbox 是默认的，因此 flexbox 不需要额外的 CSS，并且 h-100 类可用于使卡片全高:http://www.codeply.com/go/gnOzxd4Spk
<小时>相关问题:Bootstrap 4 - 卡片列中的响应卡片
I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.
The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply here.
This doesn't make sense to me since, I would assume, that you'd want a minimum size for your card to shrink to in order for your content to still look good.
I then tried adding in some viewport classes to break on screen sizes, but as soon as that div gets added, the card-deck doesn't apply anymore, thus not making the cards equal height.
How can I get this accomplished? Is this a missing feature that will be addressed in the full release of Bootstrap 4?
Here's the fiddle: 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>
解决方案
Updated 2018
If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...
Bootstrap 4 responsive card-deck (v 4.1)
Original answer for Bootstrap 4 alpha 2:
You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox.
.row > div[class*='col-'] {
display: flex;
flex:1 0 auto;
}
http://codeply.com/go/O0KdSG2YX2 (alpha 2)
The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk
Related question:
Bootstrap 4 - Responsive cards in card-columns
这篇关于Bootstrap 4 卡片组，列数基于视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
