Bootstrap拆分下拉包装在表标题中

Question

我有一个拆分的Bootstrap下拉列表，我将其包装在一个表单中并添加到表标题中。问题是，当您缩小屏幕大小时，下拉切换元素会换行。起初我认为它是表格包装，但我认为它是表格标题。

以下是包含实时代码的示例的http://www.bootply.com/zzRJxiYy80。

谢谢，

丹

MINOR UPDATE（有关回答评论的详细信息）

在我的情况下，我使用的是大纲按钮。我在每个按钮中都有Ransack排序链接，并在下拉列表中过滤。第二个“主要类别”的线条比其他线条略宽，在这一点上，我做了太多的大量工作。像这样的小东西让我疯了，但我需要放手吧:)

这个是-0.45em

我玩了这个并且定居在-0.37em

Answer 1

我建议覆盖Bootstrap使用float:left来保持这些.btn元素在同一行，而是使用display:inline-block。然后，当空间有限时，您可以使用white-space:nowrap来阻止它们分成多行。

您需要的大多数样式（display:inline-block和white-space:nowrap）实际上已在Bootstrap的CSS中定义 - 您只需要更多样式就可以使用它们：

.btn-group.nowrap > .btn{
    float:none;
}
.btn-group.nowrap > .btn:not(:first-child){
    margin-left: -0.4em; /* To deal with whitespace between inline-block elements */
}

这里有updated Bootply来演示。希望这可以帮助！如果您有任何问题，请告诉我。