表格中的Bootstrap 2.3.2分割按钮下拉列表

时间:2014-10-09 18:04:47

标签: html css twitter-bootstrap twitter-bootstrap-2

右侧的下拉列表位于表格单元格中,这在桌面浏览器上有效。

enter image description here

然而,在移动设备上,点击后,下拉列表会分为两行:

enter image description here

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>

1 个答案:

答案 0 :(得分:1)

问题很可能源于表格单元格宽度对于两个元素都太短。

最简单的解决方案是设置为该单元格添加一个类并添加最小宽度,尽管您将远离纯引导程序。

HTML:

<td> ... </td>
<td class="dropdownCell">
    <div class="btn-group">
    ...

的CSS:

.dropdownCell { min-width:130px; }

小提琴在这里:http://jsfiddle.net/a4kx75t1/1/