twitter-bootstrap - Bootstrap中表格行的下拉菜单

Question

我正在尝试使用找到的 Jasny 扩展从表格行获取下拉菜单 http://www.jasny.net/bootstrap/components/#rowlink .不幸的是，我似乎无法让它显示下拉菜单。我有一个到目前为止我所做的例子:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>​

单击行将跟随 href 链接，而不是显示下拉菜单。
我可以让 rowlink 扩展作为链接工作或调用模式窗口。
我也可以从单个单元格(没有 jasny 扩展名)获得下拉列表，但希望它可以在整行中工作。

Answer 1

Bootstrap 3.x

默认情况下，表格单元格内的 Bootstrap 下拉菜单不会正确显示(它们会显示在页面底部)。要解决此问题，您需要将容器的类设置为下拉菜单。对于表格单元格，这看起来像这样:

<td class="dropdown">

演示:
http://jsfiddle.net/sytelus/kzxes29r/

PS:如果您不想更改表格单元格的样式，您也可以在单元格内创建一个 div 并将其类设置为“下拉”。