5

estou fazendo um grid que irá aparecer alguns produtos, até 3 por linha, em mobile 1 por linha, o problema é que a altura varia e dai nos monitores ele 'encavala' um por cima do outro.

Solução seria colocar um height: 270px fixo, porém para layout mobile não posso.

Meu HTML

 <div class="container ">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 grid">1 - teste de linha Gigante e sempre vai dar algum problema
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" width="350" alt="" class="img-responsive img-thumbnail">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">2 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt=""  width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">3 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">4 - teste</div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">5 - teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    1 - teste de linha Gigante e sempre vai dar algum problema
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" class="img-responsive img-thumbnail">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    2 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 grid">
                    3 - teste
                    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="" width="200">
                </div>
            </div>
    </div>

Exemplo no fiddle https://fiddle.jshell.net/dorathoto/mt0rb3kj/3/ No fiddle é difícil de visualizar a tela grande, para ver como ele enrosca.

Tentei fazer através de: Mas acho que devo ter confundido algo, pois deveria funcionar.

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        max-height: 146px !important;
    }
}

@media (min-width: 992px)
{
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    max-height: 250px !important;
}
}

Mas sem sucesso.

Update [18/05/2016] Foi proposto o uso da <div class="row"> a cada 12 elementos. Mas se tenho uma opção que varia de acordo o dispositivo, ou seja para tela -md- seria a cada 3 itens uma row, mas para tela -sm- a cada 2 itens e para -xs- 1 item por row.

Abaixo uma imagem que ilustra o meu problema inserir a descrição da imagem aqui

1
  • Isso me parece caso para flexbox
    – Largato
    Commented 17/05/2016 às 18:01

1 Resposta 1

1

A sua quantidade de grids esta errada, mesmo que use o .row, o .col-*-4 deve ter apenas 3 divs em um mesmo .row

Pra saber se a quantidade sempre some os .cols o total DEVE ser sempre 12, ou seja:

  • Se for usar apenas .col-*-4 então será 3, pois 4+4+4 = 12
  • Se usar .col-*-6 será 6+6=12
  • Também pode fazer 6+3+3=12 por exemplo.

No seu caso tem oito divs com .col-*-4, então 8x4=32, ou seja o resultado é diferente de 12 e por isto ocorre o problema ou outros problemas (que provavelmente você tentou resolver com CSS e acabou se amarrando na gambiarra que agora esta gerando este problema).

Recomendo que leia a documentação http://getbootstrap.com/css/#grid antes de usar, pois apesar de fácil de entender muitas coisas no bootstrap não são intuitivas só de usar, como esta em inglês vou por alguns trechos importantes do GRID aqui:

  • Os .rows devem ser colocados dentro de um .container (com largura fixa) ou .container-fluid (largura total) para o alinhamento e preenchimento adequado (se não possuir isto irá afetar as margens).

  • Use os .rows para criar grupos horizontais de colunas.

  • O conteúdo deve ser colocado dentro de colunas (.col-*-*) e colunas deve ser sempre filhas de .row e de nenhum outro elemento.

  • Os .col-* geram espaçamentos entre eles. O espaçamento é compensado no .row através de margem negativa.

  • Colunas de grade (.col-*) são criados para ter especificamente disponíveis 12 colunas que você pode estender. Por exemplo, três colunas iguais usaria três .col-xs-4.

  • Se mais do que 12 colunas são colocados dentro de uma única fileira, cada grupo de colunas adicionais irão para quebrar para uma nova linha.

  • As classes .col- aplicam-se o width:; para telas com tamanho maior ou igual ao tamanho minimo (definido nos medias-queries) e acaso o dispositivo tenha a tela menor, ele irá substituir pela classe .col- definida para telas menores. Portanto se usar qualquer classe .col-md-* para um elemento não só irá afetar o seu estilo em dispositivos do tamanho de tela escolhido (md, lg, sm, etc), mas também afetar telas maiores se uma classe .col-lg-* não estiver presente (isso é um exemplo).

O mais correto seria algo como:

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
        <div class="col-md-4 col-sm-4">
            Foo bar baz
        </div>
    </div>
8
  • Comentário adicional, traduzir esse texto ao pé da letra da documentação é bem dificil de ler, até mesmo pra quem sabe inglês, tentei adaptar o texto usando explicações do meu próprio entendimento do bootstrap, se tiver algum erro fique a vontade pra corrigi-lo.
    – Syzoth
    Commented 17/05/2016 às 21:46
  • Mas é se fosse "col-md-4 col-sm-2" como faria o row? Se pra um vai ser com 3 itens e outro com 6?
    – Dorath
    Commented 17/05/2016 às 22:43
  • @Dorathoto todos sm tem que dar 12, assim como todos md tem que dar 12. Ou seja se tem 3 colunas, vai ter que ficar algo como: <div col-md-4 col-sm-2></div> <div col-md-4 col-sm-2></div> <div col-md-4 col-sm-8></div>
    – Syzoth
    Commented 17/05/2016 às 22:46
  • É mas no caso de produtos todos iguais não poderia fazer um com o resto e sim algo padronizado, no texto q Vc traduziu no 2° item diz q se passar mais de 12 fará quebra de linha, isso que eu quero, mas sem encavalar.
    – Dorath
    Commented 17/05/2016 às 22:53
  • @Dorathoto sem encavalar? Como seria isto? Se esta falando do conteudo dos cols vazando no exemplo fiddle.jshell.net/dorathoto/mt0rb3kj tente usar overflow: hidden (claro que o conteudo vai sumir)
    – Syzoth
    Commented 17/05/2016 às 22:59

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 .