부트 스트랩의 세로 간격 문제

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