向表格行添加下拉列表时,它会被切断:
其他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;">
这就是现在的样子:
答案 0 :(得分:0)
看起来问题是网格体类的overflow
样式设置为hidden
。当下拉列表被激活时,其大小大于网格体的大小,因此下拉列表会被剪切。如果使用grid-body类将overflow: visible
添加到div的style属性,则可以看到它已修复:fiddle
作为永久性修复,您可能希望探索修改HTML和/或CSS,而不是直接将样式添加到元素中。