右侧的下拉列表位于表格单元格中,这在桌面浏览器上按预期工作。
但是在移动设备上,点击时,下拉菜单会分成两行:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<a href="#" class="btn btn-primary btn-small"><i class="icon-eye-open icon-white"></i> Visualizza</a>
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Modifica</a></li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
最佳答案
问题很可能源于表格单元格的宽度对于两个元素来说都太短了。
最简单的解决方案是设置向该单元格添加一个类并添加最小宽度,尽管您将远离纯 Bootstrap 。
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
CSS:
.dropdownCell { min-width:130px; }
fiddle 在这里:http://jsfiddle.net/a4kx75t1/1/
关于html - Bootstrap 2.3.2 表格行中的拆分按钮下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26285113/