Question

根据MetalFrog's answer to this problem我试图将单元格宽度与其内容相符：

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

这看起来非常好here (jsfiddle)。但是，通过将一个twitter-bootstrap按钮组添加到应该适合其内容宽度的单元格，按钮将仍然在它们之间包裹。 jsfiddle。

如何防止我的按钮被包裹？我仍然想把它们放在一行。

修改我想保持表宽100％，因此删除1％宽度的单元格不是解决方案。只要标签标签之间有空隙，即使不需要但可以接受，也可以从引导程序.btn-group > .btn中移除浮动，这会在我的按钮之间留出空间。

Answer 1

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

.btn-group {
  display: flex;
}

说明：这定义了一个flex容器;内联或阻止取决于给定的值。它为所有直接孩子提供了灵活上下文。默认情况下，flex项目都会尝试适合一行。

Answer 2

修订答案：

内联块解决方案有点粗略 - 恢复字体大小是笨拙的b / c你不能说＆＃34;继承两个级别＆＃34;，你必须明确地设置它

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

.btn-group {display：flex;}

......正如另一位用户回答的那样。详细说明：使用display: flex使用b / c灵活性相关属性的默认值flex-direction（默认＆＃34;行＆＃34;表示水平流量），justify-content（默认＆＃ 34; flex-start＆＃34;表示项目在行的开头打包），flex-wrap（默认＆＃34; nowrap＆＃34;）完成用例。

老答案：

在按钮上使用display：inline-block。这样做的副作用是，标记之间的任何空格都将呈现为按钮之间的可见空间，因此您必须使用font-size执行此小技巧：

.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-block

此外，为了响应不同的设备外形，您可能想要提供一个比.btn-group更优雅的备用组件。

Answer 3

如果删除float属性，则它们是水平对齐的。碰巧在表格单元格上设置1％的宽度不足以容纳浮动元素。如果你增加让'百分之五十他们会水平对齐。
请参阅此处测试，td为50％：http://jsfiddle.net/7zcHW/1/show

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

两个选项：

删除.btn
或者将表格单元格宽度td.fit /设置宽度增加为自动/删除宽度。

Answer 4

我知道这可能已经过时但这是我遇到的解决方案。

我将btn-group-justified类和设置宽度添加到btn-group - DIV。我只需将宽度设置为两个按钮所需的宽度，以适应其内容。

<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的宽度设置为子项宽度的总和，或者乘以最大按钮宽度乘以子节点数。

动态拟合单元格宽度后，禁止按钮组中的按钮换行

4 个答案: