Do not reassemble columns on the bootstrap grid

Question

How to get the grid boxes to be displayed correctly without plumbing. Whereas their height will be variable as 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>

Answer 1

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

http://getbootstrap.com.vn/examples/equal-height-columns/