Question

这里我在类行中有两个bootstrap面板即使任何面板的<div class="panel-body"></div>内放置了任何数据，我也试图使面板的高度彼此相等。

下面是我的HTML

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

任何帮助都将受到高度赞赏。谢谢

Answer 1

您可以将row-eq-height应用于row课程。这将使行中的所有面板等于最高的面板。

参见示例：https://jsfiddle.net/m7jyh1ex/

Answer 2

在这种情况下最好使用matchHeight.js。

您可以匹配任何所需的组件。

我已匹配panel-body，因为当您向其添加内容时，这种情况正在增加。这也是 pen 。

注意：随着尺寸缩小，将不会应用此属性。虽然根据我的说法，如果房产仍然存在，那将是不必要的滚动。因为用户必须滚动所有空格。

$(function() {
  $('.panel-body').matchHeight();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<div class="row-eq-height">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">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 sec">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">
        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><br><br>

Answer 3

编写简单的JS以获得最大计算高度并将其分配给所有div。你不需要jQuery。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

如何使两个Div的高度相等？

3 个答案: