如何在自舉程序中制作固定高度的面板？

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

使用固定height和隱藏overflow

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

或在加載后使用JS動態為所有面板分配最大渲染高度。 在這里，請參閱我的回答，以獲取類似的問題。 該代碼段復制到下面

 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>