Twitter Bootstrap选项卡和bootstrap-select溢出问题

时间:2013-03-16 19:48:05

标签: html css twitter-bootstrap

我使用twitter bootstrap和这个插件进行选择菜单https://developer.snapappointments.com/bootstrap-select/

当我尝试将此选择应用于标签内的内容时,我遇到了问题。

http://jsfiddle.net/gbGdY/1/演示来说明问题。

外部标签,一切正常,但在标签内 - 溢出无法正常工作。

另外,如果我尝试覆盖标签溢出(像这样)

.tab-content {
  overflow: visible !important;
}

然后我又遇到了另一个问题 - 菜单下降并扩展到全高。

所以,我的问题是如何避免这个问题,并使选择菜单在选项卡内工作,就像在标签外工作一样。

2 个答案:

答案 0 :(得分:3)

希望你还在寻找解决方案? 如果你是,你可以尝试这个:

添加溢出:隐藏到制表符内容

<div class="tab-content" style="overflow: hidden">

并将数据容器添加为tab-pane / tab-content

<div class="btn-group bootstrap-select" data-container="tab-pane">

并根据需要添加/修改css规则

.dropdown-menu {
    height:200px;
}

.tab-content{
    height: 350px; 
    background: green;
    padding: 2%;
}

它将会是这样的:http://jsfiddle.net/gbGdY/1/

希望这有帮助! -r

答案 1 :(得分:2)

像您一样将.tab-content设置为overflow: visible

然后设置:

.dropdown-menu { height:200px; }

或者将其设置为您想要的任何高度。