Bootstrap拆分下拉环绕在表标题

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

下面是用于与实况代码的例子的http://www.bootply.com/zzRJxiYy80。

感谢，

丹

次要更新（从回答评论更多细节）

在我来说，我使用的轮廓按钮。我在每个按钮和下拉列表中都有Ransack排序链接。第二个“主要类别”比其他的稍宽一些，在这一点上，我让它变得太过分了。这样的次要的东西驱使我坚果，但我需要放手:)

这一个是在-0.45em

我打了这一点，并在-0.37em

入驻

来源

2016-06-07 Dan Tappin

那么，呃......什么样的行为会更容易被你接受？如果表格标题不再有足够的空间来容纳一行内容，您希望它做什么？ – Serlite

它不应该包装 - 它假设是一个单一的按钮。 –

我会建议覆盖引导程序的使用float:left用于保持这些.btn元素在同一行上，而改为使用display:inline-block。然后，您可以使用white-space:nowrap来防止空间变得有限时它们分裂成多行。

大部分实际上已经在引导的CSS定义你需要的样式（display:inline-block和white-space:nowrap） - 你只需要一对夫妇更多的款式给他们使用你的优势：

.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证明。希望这可以帮助！如果您有任何问题，请告诉我。

来源

2016-06-07 17:23:17 Serlite

这很完美 - 我的CSS技巧非常薄弱。我看过这些，但不知道从哪里开始。对于奖励积分，您是否看到下拉菜单是如何隐藏在响应表格元素中的？在打开下拉菜单时有什么办法可以自动展开？这也许应该是一个单独的问题，但我想我会浮动它。 –

@DanTappin很高兴能帮到你！是的，这可能应该是另一个问题......但是，嘿，解决方案很简单，你可能不需要问它。 = P现在，'.table-responsive'具有'overflow-x：auto'风格，这会导致多余的内容隐藏（但可滚动）。您只需将其更改为“overflow-x：visible”，并且该下拉列表不会再隐藏在该元素中。（不知道这可能有什么副作用，尽管目前不会造成任何影响。） – Serlite

它的工作效率是99％，除了margin-left选项似乎是越野车。当你调整这个边距时，左边会随机地使各种头部分流线变宽或“正常” –

Bootstrap拆分下拉环绕在表标题

回答

相关问题