动态调整单元格宽度后，禁止在按钮组中包裹按钮 [英] Suppress button wrap in button group after fitting cell width dynamically

问题描述

根据 MetalFrog对这个问题的回答我正在尝试安装一个单元格其内容的宽度:

According to MetalFrog's answer to this problem I'm trying to fit a cell width to its content:

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

如此处(jsfiddle)所示，效果很好.但是，通过将一个twitter-bootstrap按钮组添加到一个适合其内容宽度的单元格中，这些按钮仍将在它们之间自动换行. jsfiddle .

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.

如何防止按钮被包裹住?我仍然想将它们保持在同一行.

How can I prevent my buttons to get wrapped down? I still want to keep them in one line.

编辑 我想保持表格宽度为100％，因此删除单元格1％的宽度不是解决方案.另外，只要标签标签之间有空格，即使从引导程序的.btn-group > .btn中删除浮点数也会在我的按钮之间留出空间，甚至是不需要但可以接受的.

EDIT I 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 > .btn will bring space between my buttons as long as there is space between the label tags, even unwanted but acceptable.

推荐答案

添加此CSS清除将解决包装按钮组的表单元格的所有问题.

Adding this css decleration will fix any issues with table cells wrapping button groups.

.btn-group {
  display: flex;
}

说明: 这定义了一个flex容器；内联或阻止，具体取决于给定的值.它为其所有直接子级启用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.

这篇关于动态调整单元格宽度后，禁止在按钮组中包裹按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！