twitter-bootstrap 如何使用引导程序具有匹配高度的选项卡？

How to have tabs of matching height with bootstrap?

提问by Baptiste Wicht

I'm using Bootstrap tabs to display some content. Each of my tabs is almost the same height, but not exactly so when you switch tabs, there is a slight movement of the next component.

我正在使用 Bootstrap 选项卡来显示一些内容。我的每个选项卡的高度几乎相同，但并非完全如此，当您切换选项卡时，下一个组件会有轻微的移动。

Is it possible to make each tab panel the height of the maximum height ?

是否可以使每个选项卡面板的高度达到最大高度？

Here is an example: https://jsfiddle.net/ommnft3e/I'd like the <hr>to not move when I switch tabs. Is that possible ?

这是一个示例：https: //jsfiddle.net/ommnft3e/我希望<hr>在切换选项卡时不要移动。那可能吗 ？

Thanks

谢谢

回答by Devjit

Override the bootstrap css and Use visibility hidden

覆盖引导 css 并隐藏使用可见性

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

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

see the fiddle https://jsfiddle.net/devjit/ommnft3e/5/

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

In that case I think you will have to use javascript to determine the max height. check this fiddle .. https://jsfiddle.net/devjit/ommnft3e/8/

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

回答by Dario Corno

I wrote this little script that manages the tab pane heights and adjust it to make them all the same height.

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

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;
}

Just create the bootstrap tabs and after that call

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

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

It's quite crap but I arranged it in a hurry, hope it helps.

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

回答by sheshadri

It is because of data... In Tab A it has only one row. So Scroll bar not visible When you click on Tab B it has more than one row. So it will display scroll bar. Bcoz of that you feel like height changes. Tab height is depends on Tab Content..

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

<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

检查此选项卡

OR

或者

Use fixed height for both Tab and add scroll bar...

对 Tab 使用固定高度并添加滚动条...