Como fazer cartões Bootstrap 4 da mesma altura em colunas de cartão?


134

Estou usando o Bootstrap 4 alpha 2 e aproveitando os cartões. Especificamente, estou trabalhando com este exemplo retirado dos documentos oficiais. Como posso fazer com que todos os cartões tenham a mesma altura?

Tudo o que posso pensar agora é definir a seguinte regra CSS:

.card {
    min-height: 200px;
}

Mas essa é apenas uma solução codificada que não funcionará em um caso geral. O código, em minha opinião, é o mesmo dos documentos, ou seja:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</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>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Algum esforço até agora? Qualquer código para compartilhar?
baao

2
Esse exemplo é para colunas tipo Maçonaria. O ponto principal desse estilo é que as cartas têm alturas diferentes . Use um deck e ative o modo flexbox se quiser alturas iguais.
Quentin

1
O baralho funciona apenas para cartas consecutivas. O que eu quero é o mesmo efeito, card-columnsmas mantendo a mesma altura.
blueSurfer

Respostas:


162

Você pode colocar as classes na "linha" ou na "coluna"? Não ficará visível nos cartões (borda) se você usá-lo na linha. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Algumas das outras respostas aqui parecem 'malucas'. Por que usar uma altura mínima ou, pior ainda, uma altura fixa?

Achei que esse problema (alturas iguais) fosse parte do motivo da progressão para longe das divs de bloco flutuante.


3
h-100 não é uma altura fixa, é uma altura de 100% (da linha)
konyak

esta deve ser a resposta do ACed
meeps de

Esta é a verdadeira resposta
Andrew Bullock

@konyak sim, eu entendo isso, amigo. Não estou me referindo a h-100 (role para baixo nesta página).
Kerry7777

139

Estou usando o Bootstrap 4 (Beta 2). Enquanto isso, a situação parece ter mudado. Tive o mesmo problema e encontrei uma solução fácil. Este é o meu código:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

Com "col-sm-12 col-lg-6" tornei os cartões responsivos. Com "cartão h-100", coloquei todos os cartões na altura de sua coluna pai. No meu sistema isso funciona, mas não sou um profissional. Então, espero ter ajudado alguém.


16
tão simples h-100
PNC

9
.h-100 - brilhante
JCraine

2
Isso funcionou para mim quando d-flexcausou problemas com o IE (que devo oferecer suporte). Acabei de adicionar um mb-4ao div pai para separar um pouco mais os cartões.
Charles Paske

e você também pode usar. pré-rolável para fazê-lo rolar verticalmente
Muhammad Waqas Aziz

Eu adicionaria a classe .py-2 a todos os divs com a classe .col- * para adicionar preenchimento entre as linhas.
konyak

93

Melhor solução, o Bootstrap 4 tem tudo que você precisa: USE O .d-flexe .flex-fillclasse. Não use os, card-deckspois eles não respondem. Eu usei col-sm, você pode usar a .colclasse que quiser, ou usar col-lg-xo x significa número de coluna de largura, por exemplo, 4 ou 3 para melhor visualização se o post tiver mais de 3 ou 4 por coluna

Aqui está a besta, tente reduzir a janela do navegador para XS para vê-la em ação:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


1
Esta resposta funciona muito bem! Se você não puder usar 'coluna de cartas' ou 'baralho de cartas' para obter o comportamento responsivo desejado em todas as janelas de exibição.
Getsomepeaches

Isso funcionou para mim. Tenho uma coluna com um cartão grande e, à direita, outra coluna com duas linhas. então, o cartão da esquerda tem a altura das duas linhas adjacentes, obrigado!
Erich García

Este foi o caminho a seguir. Tentei, card-columns mas não conseguia mais do que 3 colunas por linha. Obrigado por esta resposta
Yeku Wilfred Chetat

o baralho não estava funcionando no meu caso, sua resposta deu certo!
TBG

31

Você pode aplicar a classe h-100, que significa altura 100%.


12

ATUALIZAÇÃO: No Bootstrap 4 , o flexbox agora é o padrão e cada card-decklinha conterá 3 cartões. Os cartões serão preenchidos com a altura total.

http://www.codeply.com/go/x91w5Cl6ip

O Bootstrap 4 alpha card-columnsusa colunas CSS3 que realmente não suportam alturas iguais (exceto preenchimento de coluna que só é suportado no Firefox).

Se, em vez disso, você habilitar o modo flexbox do Bootstrap 4, poderá usar o card-decke um pouco de CSS para equalizar a altura e agrupar a cada 3 colunas.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Cartão Bootstrap Relacionado
de mesma Altura na Col


Eu fiz um bifurcação em seu codeply para testar algo; Preciso que os títulos estiquem para ter a mesma altura também, o que não acontece aqui: codeply.com/go/fqnQZ2ZGJy - sei de alguma maneira de fazer com que meus "títulos mais curtos" tenham a mesma altura do título mais longo? Eu tentei brincar com flexbox e grades, mas não consigo acertar.
davewoodhall

11

Aqui está como eu fiz:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

4

embrulhe os cartões dentro

<div class="card-group"></div>

ou

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


3

Eu fiz uma abordagem um pouco diferente. Usando o invólucro do Card Deck

Eu adicionei uma regra de estilo que limita a altura do bloco do cartão:

.card .card-block {max-height:300px;overflow:auto;}

Isso dá o seguinte resultado: insira a descrição da imagem aqui


3

Você pode usar o baralho de cartas, ele irá alinhar todas as cartas ... isso vem da página oficial do bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

2

Outra abordagem útil são as grades de cartão :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
      </div>
    </div>
  </div>
</div>


1

A maneira mais mínima de conseguir isso (que eu saiba) :

  • Aplica-se .text-monospacea todos os textos do cartão.
  • Limite todos os textos nos cartões ao mesmo número de caracteres.

ATUALIZAR

Adicione .text-truncateo título do cartão e ou outros textos. Isso força os textos a uma única linha. Fazer as cartas têm a mesma altura.


Acho que você está enganado com essa resposta. Cada cartão ou seção de uma página da Web em funcionamento terá claramente diferentes quantidades de texto (caracteres) e usará fontes / fontes que não são monoespaçadas. Por que você deseja truncar o conteúdo de texto que os visitantes (não podem) ler?
Kerry7777

@ Kerry7777, você pode querer truncar uma string longa e adicionar um "..." no final dela para que os usuários saibam que ela foi truncada. Para que possam ler a string inteira, eles terão que clicar ou passar o mouse sobre ela. Dessa forma, podemos fazer consistências nos conteúdos exibidos. Porque o conteúdo não é o mesmo. Alguns são curtos, alguns são longos e nosso espaço na tela é limitado.
doncadavona

1
Em alguns casos, é apenas o comprimento do texto que torna as cartas desiguais em altura. Portanto, esta resposta é útil.
Mohammed Shareef C

1

Eu sou um novato nisso, então, por favor, perdoe se eu estiver perdendo alguma coisa.

Eu tentei muitos dos itens acima. Se você definir a altura = 100%, o cartão sempre se expandirá para o maior comprimento do cartão mais longo. O contêiner restringirá todos ao mesmo comprimento.

Eu queria ver o contêiner, então usei a cor de fundo para me ajudar a ver o que estava acontecendo.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

0

isso funcionou bem pra mim:

<div class="card card-body " style="height:80% !important">

forçando nosso CSS sobre o CSS geral de bootstraps.


0

Me deparei com esse problema, a maioria das pessoas usa jQuery ... Aqui estava minha solução. "Não se preocupe, eu sou apenas um iniciante nisso ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}
     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Se a altura de qualquer item de cartão for, por exemplo, 400px (com base em seu conteúdo), porque o padrão para flex-align é esticar, então .card-item (filho de linha ou classe de coleção de cartão) será esticado. fazer com que a altura do cartão seja 100% da altura do pai ocupará essa altura total.

Espero estar correto. Sou eu?


-3

Se alguém estiver interessado, existe um plugin jquery chamado: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight torna a altura de todos os elementos selecionados exatamente igual. Ele lida com muitos casos extremos que fazem com que plug-ins semelhantes falhem.

Para uma linha de cartas, eu uso:

<div class="row match-height">

Em seguida, habilite todo o site:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

-12

jsfiddle

Basta adicionar a altura desejada com CSS, exemplo:

.card{
    height: 350px;
}

Você terá que adicionar seu próprio CSS.

Se você verificar a documentação, isso é para o estilo de alvenaria - o ponto é que eles não têm a mesma altura.


Parece que o conteúdo dos cartões não está alinhado corretamente. Esta solução é muito manual. Gostaria de saber se há algo mais "inteligente"
blueSurfer

Você pode tentar algo com jQuery, para criar dinamicamente a altura. Depende do que você deseja fazer com eles.
PlatinumJay

Apenas muito curioso para saber por que tantos votam contra a resposta? porque parece que funciona
Kick Buttowski

2
Isso não significa que o cartão permanece com uma altura fixa, não com uma altura igual de resposta?
Robert Andrews,
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.