2

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).

inserir a descrição da imagem aqui

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.

inserir a descrição da imagem aqui

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

2
  • Tem certeza que deveria chamar essas 3 classes dentro da div? Teste trocar as classes: col-sm-12 col-md-6 col-lg-3 por essa col-sm-3. 27/11/2015 às 13:54
  • Se eu chamar somente a col-lg-3 não acontece esse problema, porém, ao diminuir a window, a 2ª coluna corta o final do título "Confiabilidade". Como diminui a tela e não havia a classe col-md-6, as colunas ficaram "miúdas". Mas obrigado pela ajuda. 27/11/2015 às 14:09

2 Respostas 2

1

Apesar do post ser antigo, pode ajudar outras pessoas, eu resolvi usando o seguinte.

<div class="clearfix visible-xs-block"></div>

De uma pesquisada de como usar.

Aqui tem um exemplo: https://codepen.io/millano572/pen/bpzgja

0

Lucas,

Já passei por isso, e resolvi assim:

Criei uma classe customizada:

/* substitua 200px pela altura do quadro com duas linhas, "MELHOR" */
.min-height-200 { min-height: 200px; } 

Então, em cada quadro seu, vc adiciona essa classe:

 <div class="col-sm-12 col-md-6 col-lg-3 min-height-200" style="background-color: #666">
   [...]
 </div>

Isso vai garantir que seus quadros tenham altura minima, independente se tiverem 1 ou 2 linhas de descrição.

Para saber mais: W3Schools: CSS Min-Height

2
  • Sua solução funcionou certinho Thiago. Muito obrigado! 27/11/2015 às 15:24
  • Legal, @LucasMarques, qualquer coisa, grita! :) 27/11/2015 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .