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