Я пытаюсь реализовать функцию card-deck в bootstrap 4, чтобы сделать все мои карты одинаковыми.
Примеры, которые загружают, показывают 4 симпатичных карты, но это 4 карты в строке, независимо от области просмотра. См. Здесь код.
Для меня это не имеет смысла, поскольку я бы предположил, что вы хотите, чтобы минимальный размер вашей карты сокращался, чтобы ваш контент по-прежнему выглядел хорошо.
Затем я попытался добавить в некоторые классы видовых экранов разрывы на размерах экрана, но как только этот 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 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 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>