css - Bootstrap 下拉列表的堆叠问题

Question

将下拉列表添加到表格行时，它会被截断:

其他questions已经指出了堆叠问题的方向，但我不知道如何解决它。我已经尝试将 z-index:1000 和 position:relative 样式属性添加到每个父 DIV，但这并没有解决问题。不确定接下来要尝试什么...

<div class="row-fluid">
    <div class="span12">
        <div class="grid simple ">
            <div class="grid-body table_highlight>
                <table class="table table-striped" id="example2">
                    <thead>
                        <tr>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr> 
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-info dropdown-toggle btn-demo-space" data-toggle="dropdown" href="#"> Info <span class="caret"></span> </a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

编辑

我已将代码更改为以下内容，以便更清楚地说明它们是如何组合在一起的:

<div class="row-fluid" style=" border: 5px red solid;">
    <div class="span12" style=" border: 5px green solid;">
        <div class="grid simple " style=" border: 5px blue solid;">
            <div class="grid-title">
                ...
            </div>
                <div class="grid-body table_highlight" style=" border: 5px yellow solid;">

现在是这样的:

Answer 1

看起来问题出在 grid-body 类的 overflow 样式设置为 hidden。当下拉菜单被激活时，它的大小大于网格体的大小，因此下拉菜单被剪裁。如果您将 overflow: visible 添加到带有 grid-body 类的 div 的样式属性中，您可以看到它已修复:fiddle

不过，作为永久性修复，您可能想要探索修改 HTML 和/或 CSS 而不是直接将样式直接添加到元素。