1

Olá, boa tarde, teria alguma maneira de fixar os col-md aonde foi posicionado sem que haja alteração?

Antigamente eu fazia deste modo:

<div class="col-md-12">
  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>
</div>

Porém agora eu preciso que seja deste modo:

<div class="col-md-12">
  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>
</div>

Pois a aparição dos produtos é automática e não tem como adicionar uma nova col-md-12 pra delimitar o espaço.

Gostaria que ficasse tudo certo assim: http://prntscr.com/l1e8ql

Porém basta ter um desnível de tamanho nos box ou realizar o fechamento de um que sai do lugar: http://prntscr.com/l1e8z4

Isso vale para as perguntas do faq também: http://prntscr.com/l1e92q

1 Resposta 1

0

Amigo pelo que entendi da sua resposta parece que é isso que vc precisa. Porém no seu projeto deve ter algo a mais que está fazendo quebrar o grid original do Bootstrap, pq mesmo com um col dentro da outra, sem row o exemplo abaixo não apresento o mesmo problema que o seu.

Execute em "Página toda" para ver a responsividade:

[class^="col-"] {
  box-sizing: border-box;
  border: 1px solid black;
}
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

	
	<div class="col-md-12">
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
<div class="col-md-4">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		<img src="https://placecage.com/100/100" alt="">
	</div>
</div>


Se vc quiser que todos os col tenha a altura do maior irmão vc da fileira vc pode usar display:flex no pai.

Ficaria dessa forma:

.col-md-12 {
  display: flex;
  flex-wrap: wrap;
}
[class^="col-"] {
  box-sizing: border-box;
  border: 1px solid black;
}
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="col-md-12">
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
			<img src="https://placecage.com/100/100" alt="">
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic rerum quia, necessitatibus repellendus perspiciatis reprehenderit veniam asperiores harum totam labore dolore corrupti voluptatibus molestiae culpa numquam at ipsam tenetur aliquid.
		</div>
	  
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
		<div class="col-md-4">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, atque.
			<img src="https://placecage.com/100/100" alt="">
		</div>
</div>

5
  • Não deu certo! :( prntscr.com/l1wocw Commented 4/10/2018 às 0:02
  • @RonyOliveira Tentou colocando isso na div de fora que vai receber os conteúdos? .col-md-12 { display: flex; flex-wrap: wrap; } ?
    – hugocsl
    Commented 4/10/2018 às 0:07
  • Tentei novamente e deu certo, obrigado!! Commented 4/10/2018 às 20:20
  • @RonyOliveira que bom que deu certo. Se a minha resposta te ajudou de alguma forma considere marca-la como aceita nesse ✔ ai ao lado esquerdo perto das setinhas. Basta clicar nele, assim a pergunta não fica aberta já tendo sido resolvida :)
    – hugocsl
    Commented 4/10/2018 às 20:23
  • 1
    pronto, marquei :) Commented 7/10/2018 às 0:45

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 .