Do not reassemble columns in the bootstrap grid

1

How to make grid boxes appear correctly without overlapping. Considering that the height of them will be variable, because the content is dynamic.

new Vue({
	el: "#app",
  data: {
  	title: 'Boxes dinamicos sem encavalamento',
  	itens:[
    	{
      	title: "Quis autem vel eum iure reprehenderit", 
      	description: "reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      },
    	{
      	title: "doloremque laudantium", 
      	description: "dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
      },
    	{
      	title: "maiores alias consequatur aut perferendis", 
      	description: "doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis"
      },
    	{
      	title: "laborum et dolorum", 
      	description: "placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."
      },
    	{
      	title: "Nam libero tempore", 
      	description: " Itaque earum rerum hic tenetur a sapiente delectus"
      },
    	{
      	title: "Nemo enim ipsam voluptatem quia", 
      	description: "voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur"
      },
    	{
      	title: "Et harum quidem rerum facilis", 
      	description: "molestiae non recusandae illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      },
    	{
      	title: "Quis autem vel eum iure reprehenderit", 
      	description: "reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      }      
		]
  }
});
a.box:hover{
	text-decoration:none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app">
  
  <h1>{{title}}</h1>

  <div class="container">
    <div class="row">
      <div v-for="item in itens" class="col-xs-6 col-md-3 col-lg-2">
        <a href="#" class="thumbnail box">
          <img class="img-responsive" src="https://placehold.it/500x300"alt="" />
          <h4>{{item.title}}</h4>
          <p>{{item.description}}</p>
        </a>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
    
asked by anonymous 25.10.2016 / 13:46

1 answer

0

There are several plugins that already do this for you very easily, matchHeight, equalHeight and so on.

link

    
25.10.2016 / 15:25