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

Question

由于我使用 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%两个窗格上尝试过，但也不起作用。

Answer 1

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

Answer 2

min-height您可以在类中使用该属性tab-content。

\n\n

对于我使用值 \xe2\x80\x8b\xe2\x80\x8bin 像素的示例，我建议使用百分比或应用值 \xe2\x80\x8b\xe2\x80\x8binrem或em，如您认为合适。

\n\n

\r\n

\r\n

.tab-content {\r\n  background-color: yellow; /*Only for visual example*/\r\n  min-height: 100px;\r\n}

\r\n

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\r\n<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>\r\n\r\n<div class="d-flex flex-column">\r\n  <ul class="nav nav-pills">\r\n    <li class="nav-item">\r\n      <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>\r\n    </li>\r\n    <li class="nav-item">\r\n      <a class="nav-link" data-toggle="pill" href="#second">TWO</a>\r\n    </li>\r\n  </ul>\r\n  <div class="tab-content">\r\n    <div class="tab-pane container active show" id="first">\r\n      Get started with Bootstrap, the world\xe2\x80\x99s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks\r\n      at StackPath.\r\n    </div>\r\n    <div class="tab-pane container fade" id="second">\r\n      Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath.\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n