带有nowrap的表格单元溢出

Question

我正在使用bootstrap，并希望创建一个简单的HTML table，在最后一列中我有一个2按钮组和一个单独的按钮。我希望这最后一个单元始终将这3个按钮保持在一行中，所以我添加了text-nowrap引导类（这是一个简单的white-space: nowrap）。

如果其他单元格的内容足够长，最后一个单元格的内容将水平溢出，我不明白为什么。我希望表的其余部分会缩小，以便为非包装单元留出空间。

以下是重现此问题的演示：bootply

这是标记。

<div style="width: 500px">
  <table class="table table-striped">
    <tbody><tr>
      <td>Test text</td>
      <td class="text-nowrap">
        <div class="btn-group">
          <button class="btn btn-default"><span>A</span></button>
          <button class="btn btn-warning"><span>B</span></button>
        </div>
        <button class="btn btn-success"><span>C</span></button>
      </td>
    </tr>
  </tbody></table>
</div>

按钮组div和单独的button都是inline-block个元素，因此包装应该按预期的IMO工作。我做错了什么？

也许这与bootstrap没有严格的关系。

更新

• 我已经更新了bootply，链接是以前的版本，抱歉
• 在最新的Chrome和IE中测试过，两者的问题几乎相同。

原因和解决方法

• 我意识到从btn-group展开两个按钮会产生正确的布局，所以我开始检查btn-group实际上是什么。
• 我发现btn中的btn-group是浮动的，这种浮动会导致错误的布局。 将clearfix类添加到btn-group解决问题。不，它实际上没有，仍在研究......
• 我将研究为什么引导程序需要float: left，看起来组中的按钮可以通过纯粹使用inline-block无边距来对齐。我将在v4-alpha代码中对此进行检查，并将此问题报告给bootstrap v3。