0

Estou tentando montar o grid abaixo no Bootstrap 3.

inserir a descrição da imagem aqui

Esse grid está sendo montado dentro de um laço for.

dessa forma estou usando o esquema do Grid System, porém eles ficam alinhados dessa forma:

inserir a descrição da imagem aqui

Esse é o código:

<div class="col-xs-6 col-sm-3">
    <div class="panel panel-primary">
        <img class="img-circle center-block" alt="120x120" 
            src="https://hcommons.org/app/uploads/group-avatars/1000791/5913624c63eb1-bpfull.png" 
                data-holder-rendered="true" style="width: 120px; height: 120px;">
            <span class="pull-right">
                <small> 21/11/2018 </small>
            </span>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">TITULO</h5>
            </div>

            <p class="mb-1">AQUI O PAINEL AUMENTA OU DIMINUI CONFORME A QUANTIDAD DE TEXTO QUE VEM DO LAÇO FOR </p>

            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <button type="button" class="btn btn-primary btn-xs">TESTES 1</button>
                    <a class="btn btn-primary btn-xs" a href="#">TESTES 2</a>
                </div>
            </div>

    </div>
</div>

7
  • É aconselhável fornecer o código que você está utilizando, fica mais fácil sugerir uma edição em cima dele se for necessário, ou mesmo usa-lo como base. Commented 21/11/2018 às 21:25
  • cara ussa um array bi dimencional vc cria o primeiro array 4 colunas e dentro de cada coluna vc poe as suas divs dai quando vc for montar printa a primeira coluna com todas divs dentro dela depois a segunda terceira e quarta Commented 21/11/2018 às 21:37
  • Tá ai @CaiodePaulaSilva
    – Elton
    Commented 21/11/2018 às 21:53
  • Poderias expor um exemplo mais claro @Jasar Orion ?sou burrão
    – Elton
    Commented 21/11/2018 às 22:05
  • Cara é Bootstrap 3 ou 4? To vendo seu código e vc está usando classes dos dois ao mesmo tempo... isso não faz sentido...
    – hugocsl
    Commented 21/11/2018 às 22:13

1 Resposta 1

2

Usando o bootstrap 3, infelizmente, é impossível montar um layout igual ao que você deseja de acordo com a primeira imagem acima.

Sugiro que você use o seguinte plugin que assim você pode chegar nesse resultado.

https://masonry.desandro.com/

2
  • valeu. parece ser top. deve ter mais plugins desse tipo por ai. procurei por cascading grid, achei esse aqui também : mpezzi.github.io/bootstrap_isotope
    – Elton
    Commented 21/11/2018 às 23:37
  • as vezes não sabemos o termo certo para pesquisar esse tipo de coisa
    – Elton
    Commented 21/11/2018 às 23:38

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