twitter-bootstrap 动态拟合单元格宽度后抑制按钮组中的按钮换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23188004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Suppress button wrap in button group after fitting cell width dynamically
提问by Martin Braun
According to MetalFrog's answer to this problemI'm trying to fit a cell width to its content:
根据MetalFrog 对这个问题的回答，我试图使单元格宽度适合其内容：
tr td.fit {
width: 1%;
white-space: nowrap;
}
This works pretty well as seen here (jsfiddle). However by adding a twitter-bootstrap button group to a cell that should fit the width to its content the buttons will wrap down between them still. jsfiddle.
这很有效，如这里 (jsfiddle)所见。然而，通过将 twitter-bootstrap 按钮组添加到一个单元格，该单元格应该适合其内容的宽度，按钮将仍然在它们之间环绕。jsfiddle。
How can I prevent my buttons to get wrapped down? I still want to keep them in one line.
如何防止我的按钮被包裹？我还是想把它们排成一行。
EDITI want to keep the table width 100%, so removing 1% width of the cell is not a solution. Also removing the float from bootstrap's .btn-group > .btnwill bring space between my buttons as long as there is space between the label tags, even unwanted but acceptable.
编辑我想保持表格宽度为 100%，因此删除单元格宽度的 1% 不是解决方案。.btn-group > .btn只要标签标签之间有空间，即使不需要但可以接受，从引导程序中移除浮动也会在我的按钮之间带来空间。
回答by eteich
Adding this css decleration will fix any issues with table cells wrapping button groups.
添加此 css 声明将解决表格单元格包装按钮组的任何问题。
.btn-group {
display: flex;
}
Explanation: This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. By default, flex items will all try to fit onto one line.
说明：这里定义了一个 flex 容器；内联或块取决于给定的值。它为其所有直接子级启用 flex 上下文。默认情况下，弹性项目都将尝试适应一行。
回答by michai
REVISED ANSWER:
修改后的答案：
The inline-block solution is kind of gross -- restoring the font-size is dodgy b/c you can't say "inherit from two levels up", you have to explicitly set it.
内联块解决方案有点粗糙——恢复字体大小是狡猾的 b/c 你不能说“从两个级别继承”，你必须明确设置它。
Today I would use flexbox, which would enable eliminating the empty space between items:
今天我将使用 flexbox，它可以消除项目之间的空白空间：
.btn-group {display: flex;}
.btn-group {display: flex;}
...as another user answered. To elaborate: using display: flexworks b/c the default values for flex-related properties flex-direction(default "row" means horizontal flow), justify-content(default "flex-start" means items are packed toward the beginning of the row), and flex-wrap(default "nowrap") fulfill the use case.
...正如另一个用户回答的那样。详细说明：使用display: flexworks b/c flex相关属性的默认值flex-direction（默认“行”表示水平流），justify-content（默认“flex-start”表示项目向行的开头打包），和flex-wrap（默认“nowrap” ") 满足用例。
OLD ANSWER:
旧答案：
Use display: inline-block on the buttons. A side effect of this is that ANY whitespace between in the markup will render as visible space between the buttons, so you have to do this little trick with font-size:
在按钮上使用 display: inline-block。这样做的一个副作用是标记中的任何空白都将呈现为按钮之间的可见空间，因此您必须使用字体大小来做这个小技巧：
.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;
}
Note that this does not work with IE7 and older. Support is pretty good otherwise: http://caniuse.com/#search=inline-block
请注意，这不适用于 IE7 及更早版本。否则支持非常好：http: //caniuse.com/#search=inline-block
Also, to be responsive to varying device form factors, you might want to come up with an alternate component that just wraps more elegantly than .btn-group .
此外，为了响应不同的设备外形因素，您可能想要提出一个比 .btn-group 包装更优雅的替代组件。
回答by JohanVdR
If you remove the float property they are horizontally aligned.
It happens that setting a width of 1% on the table cell is not enough room for the floated elements. If you would increase to let' say fifty percent they would align horizontally.
See here test with td of 50%: http://jsfiddle.net/7zcHW/1/show
如果删除浮动属性，它们将水平对齐。碰巧在表格单元格上设置 1% 的宽度不足以容纳浮动元素。如果您将增加到假设 50%，它们将水平对齐。
在这里查看 td 为 50% 的测试：http: //jsfiddle.net/7zcHW/1/show
.btn-group > .btn, .btn-group-vertical > .btn {
float: left;
position: relative;
}
Two options:
两种选择：
- Remove the floated property on .btn
- Or increase table cell width td.fit / set width to auto / remove the width.
- 删除 .btn 上的浮动属性
- 或增加表格单元格宽度 td.fit / 设置宽度以自动 / 删除宽度。
回答by Skbenga
I know this may be old but here is the solution I came to.
我知道这可能很旧，但这是我找到的解决方案。
I added the btn-group-justifiedclass and a set width to the btn-group-DIV.
I just set the width as wide as I needed for both buttons to fit their content.
我向-DIV添加了btn-group-justified类和设置的宽度btn-group。我只是将宽度设置为两个按钮所需的宽度以适应其内容。
<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>
If your buttons are created statically this will work fine but if they are being generated dynamically you could use javascript to set the width of the btn-groupto either the sum of the width of the children, or by multiplying the largest button width by the number of children.
如果您的按钮是静态创建的，这将正常工作，但如果它们是动态生成的，您可以使用 javascript 将宽度设置为子项宽度btn-group的总和，或者将最大按钮宽度乘以子项数.
