这是我想要的图像:
如何为我的所有面板设置固定的 Bootstrap 面板高度?
<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>
最佳答案
使用固定的高度
和隐藏的overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
或在加载后使用 JS 将最大渲染高度动态分配给所有面板。请参阅我对一个非常相似的问题的回答 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>
关于html - 如何在 Bootstrap 中制作固定高度的面板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47252290/