3

Estou com uma dúvida no bootstrap (v4-alpha).

Criei uma <div class='row'></div> e dentro desta div possuí 4 elementos um do lado do outro.

<div class='col-3'>

Queria um ponto de quebra que em determinado momento exiba apenas dois elementos um do lado do outro. Mas só consigo fazer a quebra da coluna em que o elemento é exibido sozinho. Como posso fazer isso?

1 Resposta 1

3

Você pode adicionar outros estilos dentro do mesmo elemento para diferentes resoluções de tela. Você pode encontrar na seção Grid Options na documentação do Bootstrap. Vou colocar um exemplo para você ter uma ideia.

<div class="row">
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item1</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item2</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item3</div>
  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">Item4</div>
</div>

Dessa forma eu defini para :

(col-12) Extra small <576px

(col-sm-6) Small ≥576px

(col-md-6) Medium ≥768px

(col-lg-3) Large ≥992px

(col-xl-3) Extra large ≥1200px

Dessa forma ele vai quebrar a visualização das divs de acordo com a largura da página.

1
  • Perfeito! Desculpe pela demora, deixei esse problema pra depois rsrs e estou voltando agora nele.
    – Bsalvo
    Commented 12/07/2017 às 16:53

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 .