Bootstrap - 将最大高度应用于 div 不适用于 Bootstrap 选项卡答案

【问题标题】：Bootstrap - Applying maximum height to div's are not working on Bootstrap tabsBootstrap - 将最大高度应用于 div 不适用于 Bootstrap 选项卡
【发布时间】：2018-03-11 21:22:14
【问题描述】：

您好，我已经编写了用于计算容器的最大高度并将该高度应用于小于最大高度的容器的代码。在这种情况下，我使用了引导选项卡。我编写的代码在活动的第一个选项卡上运行良好。但是，如果我们单击其他选项卡，则它不起作用。我也想将高度应用于其他选项卡的容器。请帮帮我。

$('.container-height').each(function() {
  var highestBox = 0;
  $('.column', this).each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }

  });
  $('.column', this).height(highestBox);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">

<div class="row mrgn-top-30">
  <div class="col-sm-12">
    <div class="atoz-tabs">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#a">A</a></li>
        <li><a data-toggle="tab" href="#b">B</a></li>
        <li><a data-toggle="tab" href="#c">C</a></li>
      </ul>
      <div class="tab-content">
        <div id="a" class="tab-pane fade in active">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered on one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paper</p>
              </div>
            </div>
          </div>
        </div>
        <div id="b" class="tab-pane fade">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered c</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paperon one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
          </div>
        </div>
        <div id="c" class="tab-pane fade">
          <div class="row mrgn-top-30 container-height" style="display: flex;flex-wrap: wrap;">
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Abrasive Papers</p>
                <p class="more">Papers covered c</p>
              </div>
            </div>
            <div class="col-xs-6 col-sm-4">
              <div class="alphabet-order column">
                <p>Absorbent Papers</p>
                <p class="more">A grade of paperon one or both sides with abrasive powder such as emery, sandpaper, etc</p>
              </div>
            </div>
          </div>
        </div>





      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

这是因为如果元素尚未显示，jquery 无法正确计算元素的高度。

因此，您可以将代码包装在一个函数中，并在单击新选项卡时调用它，就像这样

function setSameColumnHeight(){
    var activeTab = $('.tab-pane.active');
    var highestBox = 0;
    $('.column', activeTab).each(function() {
      if ($(this).height() > highestBox) {
        highestBox = $(this).height();
      }
    }); 
  $('.column', activeTab).height(highestBox);
} 

setSameColumnHeight();

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  setSameColumnHeight();
});

DEMO HERE

【讨论】：