ブートストラップで固定高さパネルを作成するにはどうすればよいですか？

Question

これは私が欲しいの画像です：

は、どのように私はすべてのパネルの固定ブートストラップパネルの高さにすることができますか？

<div class="col-md-3 padding-0"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body" style="min-height: 10px; max-height: 10px;"> 
 
     <img class="img-responsive" src="images/artgram.png" alt=""> 
 
     <p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that 
 
     your concept of their professionalism or importance changed for the better?</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-md-3 padding-0"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body" style="min-height: 10px; max-height: 10px;"> 
 
     <img class="img-responsive" src="images/artgram.png" alt=""> 
 
     <p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

いずれ隠れoverflow

.panel-body { 
    height: 100px; // or whatever 
    overflow: hidden; 
} 

又は負荷後JSを使用して動的にすべてのパネルに最大描画時の高さを割り当てることで固定heightを使用します。かなり似た質問の私の答えを参照してくださいhere。スニペットは、それが働いた

var panels = document.getElementsByClassName('panel-body'); 
 

 
var maxHeight = Array.prototype.map.call(panels, function(panel) { 
 
    return parseInt(getComputedStyle(panel).height, 10); 
 
    }) 
 
    .reduce(function(a, b) { 
 
    return Math.max(a, b); 
 
    }); 
 

 
for (var i = panels.length; i-- > 0;) { 
 
    panels[i].style.height = maxHeight + 'px'; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<div class="row"> 
 
    <div class="col-md-6"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <div class="panel panel-default col"> 
 
     <div class="panel-heading">Panel Heading</div> 
 
     <div class="panel-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit 
 
     amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
     </div> 
 
     <div class="panel-footer">Panel Footer</div> 
 
    </div> 
 
    </div> 
 
</div>