时间戳

首页 > 解决方案 > Bootstrap 4 如何使两个选项卡窗格的高度相等？

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

问题描述

由于我使用 Bootstrap 4 本机类来创建两个包含内容的选项卡窗格，我想知道是否有任何特定的类可以使两个内容窗格（类 .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 来修复它也会很酷，我尝试flex: 1 1 auto在外部 div 和flex: 1 0 100%两个窗格上使用，但也不起作用。

标签： htmlcsstwitter-bootstraptabsbootstrap-4

解决方案

您可以使用具有一致高度 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>

推荐阅读