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

标签 html css twitter-bootstrap

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

当我尝试将此选择应用于选项卡内的内容时遇到问题。

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

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

此外,如果我尝试覆盖制表符溢出(像这样)

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

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

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

最佳答案

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

添加 overflow: hidden 到 tab-content

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

并将数据容器添加为选项卡 Pane /选项卡内容

<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

关于html - Twitter Bootstrap 选项卡和 bootstrap-select 溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15453934/

相关文章:

javascript - 可在 PC 上悬停但可在其他设备菜单上点击

javascript - Bootstrap checkbox 和 radio input with font-awesome

html - 向表格添加边距的跨浏览器方式?

javascript - 如何正确地从每一侧(上、左、下、右)创建 2d 对象碰撞

html - 是否可以在 &lt;input&gt; 字段中放置一个链接?

javascript - 在文本框旁边添加一个按钮

css - Bootstrap 表数据行被放大

javascript - 使用 $ ('div' ) 和 CSS (JavaScript) 时如何在 textarea 中显示输出

Javascript 关注 div 内的 span

javascript - 具有文本动画和自动播放功能的 Jquery Slider?