bom dia!
Sou novo aqui no fórum e estou desenvolvendo uma página utilizando o bootstrap 3 e estou com uma dúvida sobre o Grid System.
Tenho uma row com 4 colunas (Deixei o background das colunas destacado de preto).
Ao diminuir o tamanho da window do navegador, o grid system vai ajustando as colunas, jogando pra linha de baixo.
Ao diminuir bem a window, acontece o problema. Como o texto da 1ª coluna é um pouco mais extenso que os outros, a altura consequentemente é um pouco maior. Com isso, a 3ª coluna foi jogada pra direita e a 4ª coluna foi jogada pra linha de baixo.
Segue o código fonte do grid.
<div class="container">
<div class="row" style="background-color: #378;">
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #666">
<div class="thumbnail avatar view-team">
<i class="fa fa-car fa-4x" style="color: #A0CD4C;"></i>
<div class="caption">
<h4>Melhor</h4>
<p>O mais completo gerenciador de bla bla bla</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #555">
<div class="thumbnail avatar view-team">
<i class="fa fa-thumbs-o-up fa-4x" style="color: #415E9B"></i>
<div class="caption">
<h4>Confiabilidade</h4>
<p>Qualidade e experiência comprovada</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #333">
<div class="thumbnail avatar view-team">
<i class="fa fa-heart-o fa-4x" style="color: #FF0000;"></i>
<div class="caption">
<h4>Favorito</h4>
<p>O sistema favorito dos clientes</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3" style="background-color: #444">
<div class="thumbnail avatar view-team">
<i class="fa fa-usd fa-4x" style="color: #F9E221;"></i>
<div class="caption">
<h4>Preço</h4>
<p>A Teste1 garante o melhor preço para você</p>
</div>
</div>
</div>
</div>
</div>
Existe alguma forma de as colunas terem a mesma altura, ou não deixar esse espaço todo vazio?
Obrigado