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

Question

这是我想要的图像：

如何为所有面板制作固定的自举面板高度？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用隐藏height

的固定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>