html - Bootstrap 4 如何使两个选项卡 Pane 的高度相等？

Question

由于我使用 Bootstrap 4 native 类来创建两个包含内容的选项卡 Pane ，我想知道是否有任何特定的类可以使两个内容 Pane (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 1 auto 并在上使用 flex: 1 0 100%两个 Pane ，但也不起作用。

Answer 1

您可以使用 Tabs with consistent height CSS Trick .

需要进行以下更改:

• 使用 visibility: hidden; 而不是 display: none; 用于非事件标签
• 在选项卡容器上使用display: flex;
• 为标签面板设置 width: 100%; 和 margin-right: -100%;

请注意，使用 visibility: hidden 将使浏览器呈现所有选项卡，因此如果内容很复杂，这可能会对性能产生负面影响。

综合起来:

.consistent-height .tab-content {
  display: flex;
}

.consistent-height .tab-content > .tab-pane {
  display: block; /* undo "display: none;" */
  visibility: hidden;
  margin-right: -100%;
  width: 100%;
}

.consistent-height .tab-content > .active {
  visibility: visible;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="consistent-height">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab-one" data-toggle="tab" href="#one" role="tab" aria-controls="home" aria-selected="true">One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-two" data-toggle="tab" href="#two" role="tab" aria-controls="profile" aria-selected="false">Two</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="tab-one">
      One line
    </div>
    <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="tab-two">
      Two<br>lines
    </div>
  </div>
  <div class="alert alert-warning mt-3" role="alert">
    This box is not jumping around when switching tabs. The box position is adapted when the container width changes.
  </div>
</div>