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

【问题标题】：Bootstrap Dropdown with Input inside Table Head Issue表头问题内带有输入的引导下拉菜单
【发布时间】：2017-02-05 05:25:10
【问题描述】：

我希望我的表格中的<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/

【问题讨论】：

在 2012 年，您不应该使用表格进行布局。 2013年我怀疑会有什么不同。 :) 欢迎来到 SO。
@JaredFarrish 嗯，这不是“布局”，我很清楚现在是 2012 年，很快就是 2013 年。我使用表格来存储表格数据，而不是我的页面结构。感谢您的评论。
如果您删除所有已添加的样式定义，它将停止换行。我最初的一个建议是不要在输入和按钮上使用边距，而是在父级上使用填充。

标签： css twitter-bootstrap html-table

【解决方案1】：

将white-space: nowrap 放在下拉列表的li 上：

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

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

【讨论】：

我更新了我的问题。我删除了该行，但问题仍然存在。
jsFiddle 很讨厌，目前没有响应，但请注意，您确实需要使下拉列表本身具有一定的大小。否则，它的大小与包含它的th 的宽度相同，您必须使th 的宽度更宽（通过将结果框拖得更宽）。我无法确定这是您所看到的，但我确实注意到了。
当然...如果您确实想要将其联合到其他标题，您可以将按钮上的Filter 值替换为包含的 Glyphicons 中的图像引导程序或您正在使用的其他任何东西。这将解决按钮宽度变化的问题，这是我上面唯一真正的问题。
是的，我试图避免给它一个静态宽度。我想这是唯一的方法。感谢您的帮助，非常感谢。
jsFiddle 回来了，所以看看同样的小提琴没有右边的三个 width-chewing 列：jsfiddle.net/userdude/qeT6T/48 你的下拉菜单看起来很棒！所以它与下拉容器的宽度有关。

【解决方案2】：

这对于整体解决方案来说可能太快太脏了，但是怎么样将此添加到您的 CSS：

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

此处的示例：
http://jsfiddle.net/VeMBq/1/

【讨论】：

是的，这似乎是修复它的唯一方法。