1

Estou estudando o Bootstrap e gostaria de tirar uma dúvida, eu fiz aqui um experimento e gostaria de saber como faço pra quando for minimizado para cel, como alinhar automaticamente as grids, quando minimizo ele fica sobreposto à minha section, a não ser que eu coloque as div com menos margin-top, mas a ideia é de ficar no meio e quando forem minimizadas, se ajeitarem, como faço?

Meu código abaixo

 <div class="deve">
  <div class="container">
    <div class="row">
    <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
  </div>
  </div>

CSS

.deve { background: black; width: 100%; height: 380px; position: absolute; }
.branco { background: white; width: 100%; ; height: 130px; position: relative; margin-top: 90px;}

Obrigado!

4
  • Já tentou utilizar as classes col-sm-*?
    – Woss
    18/01/2018 às 21:06
  • Já sim, Anderson, não adiantou, pra entender o que eu quero melhor, quando eu edito o margin-top e coloco 40px e minimizo pro col, fica do jeito que estou querendo! 18/01/2018 às 21:11
  • Vc está usando margin-top apenas para os blocos brancos ficarem no meio?
    – Sam
    18/01/2018 às 21:17
  • Sim, eu tenho a minha section fixa no tamanho de 380 pixels, e tenho 4 divs dentro dessa section, porém, no col-md se elas estiverem alinhadas no meio, quando forem para col- elas ficam sobreposta devido à altura e largura padrão da section, queria uma solução para à section aumentar a largura automaticamente quando for pra col, ou eu conseguir alinhar as 4 divs dentro da section, estou conseguindo ser claro? 18/01/2018 às 21:25

1 Resposta 1

0

Crie uma class .valign e coloque no container:

.valign{
   position: relative;
   transform: translateY(-50%);
   top: 50%;
}

Os 3 estilos acima irá centralizar verticalmente a div row dentro do container.

Na div container você coloca a classe valign:

<div class="container valign">

Edit:

Coloca também um margin: 15px 0; na classe .branco para ficar espaçado um bloco do outro:

.branco {
   background: white; width: 100%; ; height: 130px; position: relative;
   margin: 15px 0;
}
2
  • PERFEITO! Muito obrigado Dvd. Só poderia me explicar do por que a position deve ser relative? 18/01/2018 às 21:33
  • @DiegoDias Por padrão os elementos estão estáticos. O position: relative; serve para que se possa movê-los (com top, left etc...)
    – Sam
    18/01/2018 às 21:38

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 .