我正在开发一个用户可以打开标签的应用程序。请注意，我使用的是 Bootstrap CSS 框架，它也有一个选项卡插件。（如果我需要更灵活的方法，我可以使用不同的库来完成这项工作。）
http://twitter.github.com/bootstrap/javascript.html#tabs
我需要的是为标签提供灵活的宽度。它应该像 Chrome/Firefox 的标签一样工作。如果选项卡的总宽度小于栏的宽度，它应该按原样工作。但是，如果它比条的宽度长，则每个选项卡宽度的大小应该相等地减小。（如果你使用 chrome/firefox 打开 10-20 个标签，你就会明白我的意思）
有没有简单的方法可以做到这一点，而不使用 javascript？我想到的唯一解决方案是使用 javascript 获取栏的内部宽度，并获取其他选项卡的宽度并将它们总结起来。如果总和更高，那么我可以调整每个选项卡的大小。
我可以实现这个解决方案，但我担心很难确保跨浏览器的兼容性。有没有更简单的方法来实现这一目标？
提前致谢，
您可以在渲染后调整nav nav-tabs li元素的宽度。
计算有多少选项卡以其正常大小适合父元素，并将每个选项卡减少超过最大数量的每个选项卡的单个选项卡宽度的百分比。
您不需要 JavaScript，只要您可以依赖一种使宽度适应其内容的 CSS 算法：表格布局算法 :)
有关示例，请参见我之前的答案中的http://jsfiddle.net/r9yrM/1/ 。
不要忘记在每个“单元格”上都有一个最小的填充，粘在边框上的文本不是很可读（而且很难看）。
使用 JS，您可以决定选项卡的最大数量（或最小的“合理”宽度）以及高于（低于）该数量，在父级上添加一个类，该类将触发每个选项卡呈现为float: left和block不再呈现table-cell。然后它将占据 2 行或更多行（如Firefox 上的扩展Tab Mix Plus ）
我今天尝试解决同样的问题......也许我的解决方案可以帮助你更多：http ://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/
它仅使用 HTML + CSS……到目前为止还没有 JS。但我认为我需要一些 JS 来对浏览器窗口的实际宽度做出反应。