css - 表头问题内带有输入的引导下拉菜单

Question

我希望<th></th>我的表格中的一个成为单击时显示下拉列表的链接。我还想要一个输入字段，在同一个下拉列表的右侧放置一个过滤器按钮。

                <th>
                    <div class="dropdown inline-dropdown input-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span>Name</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu input-dropdown-menu">
                            <li>
                                <input class="pull-left input-first" type="text"/>
                                <button type="submit" class="btn">Filter</button>
                            </li>
                        </ul>
                    </div>
                </th>

请参阅我的小提琴以获得更多说明。

旧：http: //jsfiddle.net/qeT6T/19/

更新：http: //jsfiddle.net/qeT6T/47/

Answer 1

对于整体解决方案来说，这可能太快太脏了，但是如何将其添加到您的 css 中：

.table .input-append {
   width: 300px;
}

这里的例子：http:
//jsfiddle.net/VeMBq/1/

Answer 2

放在white-space: nowrap下拉列表中li：

.dropdown-menu li {
    white-space: nowrap;
}

http://jsfiddle.net/userdude/qeT6T/55/