Question

我正在使用Bootstrap标签显示一些内容。我的每个标签几乎都是相同的高度，但切换标签时并不完全如此，下一个组件有轻微的移动。

是否可以使每个标签面板达到最大高度的高度？

以下是一个示例：https://jsfiddle.net/ommnft3e/ 当我切换标签时，我希望<hr>不移动。那可能吗？

由于

Answer 1

覆盖bootstrap css并使用隐藏可见性

.tab-content>.tab-pane{
    display:block;
    visibility:hidden;
}

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

看到小提琴 https://jsfiddle.net/devjit/ommnft3e/5/

在这种情况下，我认为你必须使用javascript来确定最大高度。检查这个小提琴.. https://jsfiddle.net/devjit/ommnft3e/8/

Answer 2

我编写了这个小脚本来管理选项卡窗格高度并调整它以使它们具有相同的高度。

function tabHeightManager() {

this.margin = 0;
this.selcheck = '';
this.selmod = '';
this.running = false;

}

tabHeightManager.prototype.bind = function( _selcheck, _selmod, _margin ) {

if (typeof(_selcheck) === 'undefined')
    return false;
else
    this.selcheck = _selcheck;

if (typeof(_selmod) === 'undefined')
    return false;
else
    this.selmod = _selmod;

(typeof(_margin) === 'undefined') ? this.margin = 0 : this.margin = _margin;

var self = this;
$(window).on('resize', function() {
    setTimeout( function() { self.recalc() }, 200 );
})

self.recalc();
}

tabHeightManager.prototype.recalc = function() {
if(this.running)
    return false;

this.running = true;

var max = 0;
$(this.selcheck).each(function () {
    if (max < $(this).outerHeight(true))
        max = $(this).outerHeight(true);
});

max += this.margin;
$(this.selmod).css({'height': max});

this.running = false;
}

只需创建引导选项卡，然后再调用

    var tabMan = new tabHeightManager();
    tabMan.bind('.tab-pane','.tab-content',15);

这很废话，但我匆忙安排，希望它有所帮助。

Answer 3

这是因为数据...... 在选项卡A中，它只有一行。因此滚动条不可见当您单击选项卡B时，它有多行。所以它会显示滚动条。 Bcoz，你觉得高度变化。标签高度取决于标签内容..

<div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab_0_0">
                       <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab_0_4">
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                        <p>Test</p>
                    </div>
                </div>

<强> Check this Tab

或

为两个标签使用固定高度并添加滚动条...

如何使用bootstrap获得匹配高度的选项卡？

3 个答案: