动态调整单元格宽度后，取消按钮组中的按钮换行

Question

根据MetalFrog对此问题的回答，我正在尝试根据其内容调整单元格宽度：

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

正如在这里看到的那样，这非常有效（jsfiddle）。然而，通过将twitter引导按钮组添加到一个单元格中，该单元格的宽度应与其内容相适应，按钮将仍然在它们之间展开。jsfiddle。

我该如何防止我的纽扣被包裹起来？我仍然想让他们保持一致。

编辑我想保持表格宽度为100%，因此删除单元格宽度的1%不是一个解决方案。此外，只要标签标签之间有空间，从引导程序的.btn-group > .btn中删除浮动将在我的按钮之间带来空间，即使是不需要但可以接受的。

Answer 1

添加此css分离将修复表单元格包装按钮组的任何问题。

.btn-group {
  display: flex;
}

说明：这定义了一个柔性容器；内联或块，取决于给定的值。它为其所有直接子项启用了灵活的上下文。默认情况下，弹性项目都会尝试放在一行中。

Answer 2

修订答案：

内联块解决方案有点粗糙——恢复字体大小是不可靠的b/c你不能说"从两个级别上继承"，你必须明确设置它

今天我将使用flexbox，它可以消除项目之间的空白：

.btn组｛display:flex；｝

正如另一个用户回答的那样。详细说明：使用display: flex工作b/c与flex相关的属性的默认值flex-direction（默认"行"表示水平流）、justify-content（默认"flex start"表示项目被打包到行的开头）和flex-wrap（默认"nowrap"）实现了用例。

---

老答案：

在按钮上使用display:inline块。这样做的一个副作用是，标记中的任何空白都将呈现为按钮之间的可见空间，因此您必须对字体大小进行以下操作：

.btn-group {
  white-space: nowrap; 
  font-size: 0; // inline-block will show ALL whitespace between elements, so shrink it!
}
.btn-group .btn {
  display: inline-block;
  font-size: 14px; // restore font-size to whatever you are using for button text.
  float: none;
  clear: none;
}

请注意，这不适用于IE7及更旧版本。除此之外，支持非常好：http://caniuse.com/#search=inline-块

此外，为了响应不同的设备形状因素，您可能需要提供一个比.btn-group.包装更优雅的替代组件

Answer 3

我知道这可能很旧，但这是我找到的解决方案。

我在btn-group-DIV中添加了btn-group-justified类和一个设置宽度。我只是将宽度设置为两个按钮所需的宽度，以适应它们的内容。

<td class="fit"  >
    <div class="btn-group btn-group-justified" style="width:136px">
         <a href="#" class="btn btn-second">Accept</a>
         <a href="#" class="btn btn-highlight">Deny</a>
    </div>
</td>

如果你的按钮是静态创建的，这会很好，但如果它们是动态生成的，你可以使用javascript将btn-group的宽度设置为子按钮宽度的总和，或者将最大按钮宽度乘以子按钮的数量。

Answer 4

如果删除float属性，它们将水平对齐。碰巧在表格单元格上设置1%的宽度对于浮动元素来说没有足够的空间。如果你增加到50%，它们将水平对齐
请参阅此处测试，td为50%：http://jsfiddle.net/7zcHW/1/show

.btn-group > .btn, .btn-group-vertical > .btn {
    float: left;
    position: relative;
}

两种选择：

1. 删除.btn上的浮动属性
2. 或者增加表格单元格宽度td.fit/设置宽度以自动/删除宽度