我正在使用bootstrap,并且想要创建一个简单的
HTML表,在最后一列中我有一个2按钮组和一个单独的按钮.我希望这最后一个单元格始终将这3个按钮保持在一行中,所以我添加了text-nowrap引导类(这是一个简单的空白区域：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和单独的按钮都是内联块元素,因此包装应该按预期的IMO工作.我究竟做错了什么？
也许这与bootstrap没有严格的关系.
UPDATE
>我已经更新了bootply,链接是以前的版本,抱歉
>在最新的Chrome和IE中测试过,两者的问题几乎相同.
原因和解决方法
>我已经意识到从btn-group中解开两个按钮将导致正确的布局,所以我开始检查btn-group实际上是做什么的.
>我发现btn-group中的btns是浮动的,这种浮动会导致布局错误.向btn-group添加clearfix类可以解决问题.不,它实际上没有,仍在研究……
>我将检查为什么float：left是引导程序所需的,看起来组中的按钮可以通过使用纯粹的内联块来对齐而没有边距.我将在v4-alpha代码中检查这一点,并将此问题报告给bootstrap v3.
解决方法
< table class =“table”>将填充其容器的100％宽度.列宽与其内容的宽度成比例分割.
当左侧声称较大部分时,按钮列将“短”.
当左手侧具有较小部分时,按钮列将变大,从而使按钮“向中心移动”.
要解决：使用固定值设置右侧列的宽度.所有三个按钮的总宽度值：宽度：125px.如下所示：
<div style="width: 500px">
<table class="table table-striped">
<tbody><tr>
<td>Test text</td>
<td class="text-nowrap" style="width:125px;">
<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>
见：http://www.bootply.com/PGL6xCDgMz
这会将按钮列的宽度设置为固定值125px.因此,左侧列将获得剩下的任何部分.
更新1 :(根据提问者评论)
– 技巧1：
<div style="width: 500px">
<table class="table table-striped">
<tbody><tr>
<td>Test text</td>
<td class="text-nowrap">
<table cellpadding="0" cellspacing="0">
<tr>
<td><button class="btn btn-default"><span>A</span></button></td>
<td><button class="btn btn-warning"><span>B</span></button></td>
<td><button class="btn btn-success"><span>C</span></button></td>
</tr>
</table>
</td>
</tr>
</tbody></table>
</div>
– 技巧2：
<div style="width: 500px">
<table class="table table-striped">
<tbody><tr>
<td>Test text</td>
<td><button class="btn btn-default"><span>A</span></button></td>
<td><button class="btn btn-warning"><span>B</span></button></td>
<td><button class="btn btn-success"><span>C</span></button></td>
</tr>
</tbody></table>
</div>
