Html 引导4如何使两个选项卡窗格的高度相等？

由于我使用Bootstrap 4本机类创建两个包含内容的选项卡窗格，我想知道是否有任何特定类可以使两个内容窗格（class.tab pane）的高度相等

我的html是：

<div class="d-flex flex-column">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#second">TWO</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane container active show" id="first">        
            // content
        </div>
        <div class="tab-pane container fade" id="second">
            // content
        </div>
    </div>
</div>

//内容
//内容

---

如果没有，即使是一些css来修复它也会很酷，我尝试在外部div上使用

flex:1 auto

，在两个窗格上使用

flex:1 0 100%

，但都不起作用。

您可以在class

选项卡内容中使用该属性

例如，我使用了值​​以像素为单位，我建议使用百分比或应用值​​在
rem
或
em
中，如您所见


.tab内容{
背景色：黄色；/*仅用于视觉示例*/
最小高度：100px；
}







使用Bootstrap开始吧，它是世界上最流行的用于构建响应性、移动优先站点的框架，具有BootstrapCDN和模板起始页。希望快速将引导添加到您的项目中吗？使用BootstrapCDN，由用户免费提供
在StackPath。
希望快速将引导添加到您的项目中吗？使用StackPath的人员免费提供的BootstrapCDN。
由于我没有找到适合我的解决方案，我写了自己的：

  maxheight = 0;
  tabs = jQuery('.tab-content .tab-pane');
  jQuery.each(tabs, function() {
      this.classList.add("active"); /* make all visible */
      maxheight = (this.clientHeight > maxheight ? this.clientHeight : maxheight);
      if (!jQuery(this).hasClass("show")) {
          this.classList.remove("active"); /* hide again */
      }
  });
  jQuery.each(tabs, function() {
      jQuery(this).height(maxheight);
  });

您可以使用

需要进行以下更改：


使用
可见性：隐藏而不是
显示：无用于非活动选项卡

使用
显示：flex

设置<代码>宽度：100%和
右边距：-100%


总而言之：


。高度一致。选项卡内容{
显示器：flex；
}
.高度一致.选项卡内容>.选项卡窗格{
显示：阻止；/*撤消“显示：无”*/
可见性：隐藏；
保证金权利：-100%；
宽度：100%；
}
.高度一致。选项卡内容>。活动{
能见度：可见；
}







一行
两条
线
切换选项卡时，此框不会跳跃。当容器宽度发生变化时，调整箱子位置。
您尝试过：row eq height吗？是的，它不起作用，我以前使用过，但看起来它只在row Seems上起作用。对我来说，您可以在第一个选项卡周围放置一个div class=“tab content”，而不是在其内部<代码>//content//content

这就是引导程序4文档必须遵循的方式。我在粘贴html代码时犯了一个错误，因为我编辑了一些不相关的东西。嗨@NathanBernard，你找到解决方法了吗？我正在处理相同的问题，我尝试将

d-flex

添加到

tab content

和

tab pane

中，但结果是，选项卡内容与选项卡对齐，这会造成不必要的影响，最小高度和%是我无法处理的，或者我没有选择flex结构