Problemas com grids


(Randys Machado) #1

Estou utilizando o bootstrap em um trabalho e os meus grids não ficam alinhados uns abaixo do outro, gostaria de saber como faço para que eles fiquem alinhados. Segue a imagem do grid: http://static.tumblr.com/xwhnwur/6E7ofxwcw/grid.jpg

Também podem sugerir uma solução melhor, mas gostaria que houvesse duas linhas com 4 colunas.
Exemplo:

 <div class="vendas">
    <div class="container">
        <div class="row">
                <div class="col-md-3 col-lg-3">
                   
                </div>
  
        </div>
    </div>
</div>

(Luã Ciceri Schwertner) #2

@randys pensei aqui em duas alternativas. A primeira é voce jogar essas 4 divs dentro de uma pai.
Ex:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="col-lg-3">
   <div class="col-lg-3">
   <div class="col-lg-3">
   <div class="col-lg-3">
</div>

Ou tem também a possibilidade de usar o display: flex, pode dar uma olhadinha como ele funciona aqui.


(Randys Machado) #3

@lciceris eu realizei os testes aqui que foi jogando as 4 divs dentro de uma pai e elas ficaram todas alinhadas uma abaixo da outra.
Com o display: flex, eu realizei vários testes com o primeiro exemplo que tem no site onde tem 6 blocos, e os mesmos não ficam alinhados um abaixo do outro, eles sempre fazem o alinhamento com base no último bloco que é o maior.

Se tu conseguir poderia me passar por favor, agradeço.


(Nick Lima) #4

A dica do @lciceris está correta mas eu aconselho que você dê uma lida na documentação do Bootstrap para entender melhor seu funcionamento.

Principalmente por conta dos paddings automáticos que o grid tem. Como por exemplo quando usamos o .row.

Falando agora sobre a forma como está usando as classes, seria legal evitar usar toda as classes se as medidas forem iguais.

Ex:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

Ficaria assim:

<div class="col-xs-12">

As classes pegam do menor para o maior. Se eu uso:

<div class="col-xs-12 col-md-6"></div>

Significa que nas resoluções XS e SM ele terá 12 colunas e em MD e acima, ele terá 6 colunas.
É isso. Qualquer coisa é só dar um grito que a galera ajuda :wink:


(Randys Machado) #5

@lciceris, @Nick agradeço a ajuda de vocês, mas olha meu código por favor e veja o que estou fazendo de errado por favor.
Agradeço!

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <?php
                  $args = array('post_type'=>'post', 'showposts'=>-1, 'cat' => 43);
                  $my_posts = get_posts( $args );
                  if($my_posts) : foreach($my_posts as $post) : setup_postdata ($post) ;
                ?>
                    <div class="col-md-3 col-lg-3">
                        <?php the_post_thumbnail(false, array('class'=>'img-responsive')); ?>
                        <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
                        <?php the_excerpt(); ?>
                    </div> 

                 <?php
                  endforeach;
                  endif;
                ?>
            </div>
    </div>
</div>

(Mauricio Takemura) #6

Tem também as opções:

Cole o código abaixo no seu CSS

.vendas div[class*="col-"]:nth-child(4n+1) { clear: left}

Ou de 4 em 4, inserir:

<div class="clearfix"></div>

  • Nesta opção, vc tem que usar um contador auxiliar.

(Randys Machado) #7

Obrigado @zrageburn o primeiro exemplo que tu me falou do CSS resolveu bem o que eu queria. Ainda ficou alguns ajustes que tive que fazer, mas ajudou muito.

Agradecido.


(Mauricio Takemura) #8

Ah sim, dei um exemplo básico...

Dependendo, é bacana fazer os ajustes com o @media.

Abçs