ブートストラップの縦の問題

私はGoogle Keepと同様のUIを設計しようとしており、ブートストラップとmaterial designを使用しています。ブートストラップの縦の問題

コンテンツを3つの列に分割しましたが、カード間に偽の垂直スペースがたくさん追加されています。どうすれば削除できますか？まさにこれを行うためのクラスがあります

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Vertical Space Issue</title> 
    <!-- Material Design fonts --> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons"> 

    <!-- Bootstrap and Material Design --> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" rel="stylesheet"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.iife.js"></script> 

</head> 

<body style="background-color: #00BCD4;"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
          <br /> Ea harum facere, non reiciendis nemo amet voluptatem at.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p>Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis Enim ad sint non eum error perferendis, culpa, dicta </p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
           <br /> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="card"> 
        <div class="card-block"> 
         <h1 class="card-title">Some random title</h1> 
         <p class="card-text"> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis. 
           <br> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
          <p> Enim ad sint non eum error perferendis, culpa, dicta nemo nobis neque veritatis.</p> 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

出典

2016-08-21 dufferZafar

楽しむ。これは役に立つかもしれません願っています。..少ない手間方法でこれを行うには、[石造プラグイン]（http://masonry.desandro.com/）を使用します:) –

見えないおかげで役に立ったちょっと見てみます。 – dufferZafar