html - 动态调整单元格宽度后抑制按钮组中的按钮换行

Question

根据 MetalFrog's answer to this problem我正在尝试使单元格宽度适合其内容:

tr td.fit {
width: 1%;
white-space: nowrap;
}

如所见here (jsfiddle) 效果很好.然而，通过将一个 twitter-bootstrap 按钮组添加到一个单元格中，该单元格的宽度应该适合其内容，按钮仍然会在它们之间包裹起来。 jsfiddle .

如何防止我的按钮被包裹起来？我仍然想让它们排成一行。

编辑 我想保持表格宽度为 100%，因此删除单元格的 1% 宽度不是解决方案。此外，从 Bootstrap 的 .btn-group > .btn 中删除 float 会在我的按钮之间留出空间，只要标签标签之间有空间，即使不需要但可以接受。

Answer 1

添加此 css decleration 将解决表格单元格包装按钮组的任何问题。

.btn-group {
  display: flex;
}

解释: 这定义了一个 flex 容器；内联或 block 取决于给定的值。它为其所有直接子级启用 flex 上下文。默认情况下， flex 元素将全部尝试放在一行中。