我正在使用bootstrap,并且想要创建一个简单的
HTML表,在最后一列中我有一个2按钮组和一个单独的按钮.我希望这最后一个单元格始终将这3个按钮保持在一行中,所以我添加了text-nowrap引导类(这是一个简单的空白区域:nowrap).
@H_301_26@解决方法
如果其他单元格的内容足够长,则最后一个单元格的内容将水平溢出,我不明白为什么.我希望表的其余部分会缩小,以便为非包装单元留出空间.
这是一个重现问题的演示: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>