Bootstrap 4 baralho de cartas com o número de colunas baseadas na área de visualização
os exemplos que o bootstrap oferece mostram 4 cartas bonitas, mas são 4 cartas na linha, não importa a área de visualização. Veja o codeply aqui.
Isto não faz sentido para mim, pois, presumo, que queiras um tamanho mínimo para o teu cartão encolher para que o teu conteúdo ainda pareça bom. Então tentei adicionar em algumas classes de visualização a 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. Como posso conseguir isto? Esta é uma característica em falta que será abordada no lançamento completo do Bootstrap 4? Aqui está o violino. 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>
5 answers
actualizado 2018
Se quiser um baralho de cartas que responda , use os utils de visibilidade para forçar uma mudança de linha em cada x colunas em diferentes pontos de vista(breakpoints)...
Bootstrap 4 ágil baralho de cartas (v 4.1)
Resposta Original para Bootstrap 4 alfa 2:
Você pode usar a grelha col-*-* para obter as diferentes larguras (em vez do baralho de cartas) e, em seguida, definir a altura igual aos cols usando flexbox.
.row > div[class*='col-'] {
display: flex;
flex:1 0 auto;
}
Http://codeply.com/go/O0KdSG2YX2 (alfa 2)
O problema é que o w / o flexbox activou o card-deck usa table-cell onde se torna muito difícil controlar a largura. A partir de Bootstrap 4 Alfa 6, flexbox é padrão para que o CSS adicional não é necessário para flexbox, e o h-100 A classe pode ser usada para fazer as cartas de altura completa: http://www.codeply.com/go/gnOzxd4Spk
Pergunta Conexa: Bootstrap 4 - Cartas sensíveis em colunas de cartas
Aqui está uma solução com Sass para configurar o número de cartas por linha, dependendo dos pontos de paragem: https://codepen.io/migli/pen/OQVRMw
Funciona bem com 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});
}
}
}
Existe uma solução mais simples para isso - Definir a altura fixa dos elementos da carta - cabeçalho e corpo. Desta forma, podemos definir o layout resposivo com a grelha de colunas boostrap padrão.
Aqui está o meu exemplo.: 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>
Demorei um pouco a perceber isto, mas a resposta é não usar um baralho de cartas, mas em vez disso usar .row e .cols.
Isto faz um conjunto sensível de cartões com especificações para cada tamanho do ecrã: 3 cartões para xl, 2 para lg e md, e 1 para sm e xs. Põe um acolchoado em cima e em baixo para ficarem bonitos.
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
- })