使用bootstrap下拉列表堆叠问题

时间:2014-05-26 11:19:41

标签: css twitter-bootstrap drop-down-menu

向表格行添加下拉列表时,它会被切断: enter image description here

其他questions指出了堆叠问题的方向,但我无法解决如何修复问题。我尝试将z-index:1000position: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;">

这就是现在的样子:

enter image description here

1 个答案:

答案 0 :(得分:0)

看起来问题是网格体类的overflow样式设置为hidden。当下拉列表被激活时,其大小大于网格体的大小,因此下拉列表会被剪切。如果使用grid-body类将overflow: visible添加到div的style属性,则可以看到它已修复:fiddle

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