由于我正在使用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来解决也很酷,我尝试在外部div上使用flex: 1 1 auto
并在两个窗格上使用flex: 1 0 100%
,但是也不起作用。
答案 0 :(得分:3)
您可以使用Tabs with consistent height CSS Trick。
需要进行以下更改:
visibility: hidden;
代替display: none;
display: flex;
width: 100%;
和margin-right: -100%;
将它们放在一起:
.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>
答案 1 :(得分:1)
您可以在类tab-content
中使用属性min-height
。
例如,我以像素为单位使用值,建议您使用百分比或在rem
或em
中应用值,如您所愿。
.tab-content {
background-color: yellow; /*Only for visual example*/
min-height: 100px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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">
Get started with Bootstrap, the world’s 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
at StackPath.
</div>
<div class="tab-pane container fade" id="second">
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath.
</div>
</div>
</div>
答案 2 :(得分:0)
由于无法找到适合我的解决方案,因此我写了自己的解决方案:
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);
});