需要溢出属性时，Twitter Bootstrap按钮下拉列表溢出问题

Question

我创建的网站左侧有一个菜单，可能会超长，所以我需要overflow-y: auto（我放overflow-x: visible !important）。 在菜单里面我有一个下拉菜单。但由于左侧菜单溢出，右侧的下拉列表被切断。见图：

如何让下拉列表正常显示？即下拉不应该在右侧切割。

这是一个JsFiddle：http://jsfiddle.net/ssL1yydx/41/

Answer 1

我认为您可能正在寻找类似http://jsfiddle.net/ssL1yydx/48/

的内容

#left-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #f1f1f1;
}
.btn-group {
    margin-left: 10px;
    margin-top: 30px;
}

#main-content{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 0;
}

.scroll {
 overflow-y: scroll;  
 max-height: 100%;
}

并将此包装类添加到可能太长的内容中：

<div class="scroll">

Answer 2

事实证明，真正的答案是你不能混合overflow-x:visible;和overflow-y:auto;，而这实际上就是规范中的情况。

查看此帖子CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

因此，最好和最容易维护的解决方案可能是让你的左侧边栏足够容纳所需的一切，在这种情况下，我将宽度设置为200px而不是150px。

http://jsfiddle.net/t67jg2dh/

Answer 3

您应该为z-index增加#left-menu并添加：#left-menu .dropdown-menu { height:150px; overflow-y:auto; }

jsFiddle