0

ユーザーがタブを開くことができるアプリケーションを開発しています。ちなみに、私はBootstrap CSSフレームワークを使用しており、タブプラグインもあります。（より柔軟なアプローチが必要な場合は、このジョブに別のライブラリを使用できます。）

http://twitter.github.com/bootstrap/javascript.html#tabs

必要なのは、タブの幅を柔軟にすることです。Chrome/Firefoxのタブのように機能するはずです。タブの総幅がバーの幅よりも小さい場合は、そのまま機能するはずです。ただし、バーの幅よりも長い場合は、各タブ幅のサイズを等しく小さくする必要があります。（chrome / firefoxを使用して10〜20個のタブを開くと、私が何を意味するのか理解できます）

javascriptを使用せずにこれを行う簡単な方法はありますか？私の頭に浮かぶ唯一の解決策は、javascriptを使用してバーの内側の幅を取得し、他のタブの幅を取得してそれらを合計することです。合計が高い場合は、各タブのサイズを変更できます。

このソリューションを実装することはできますが、ブラウザー間の互換性を確保するのは難しいと思います。これを達成するためのより簡単な方法はありますか？

前もって感謝します、

4

3 に答える 3

0

内容に合わせて幅を調整する CSS アルゴリズム (テーブル レイアウトアルゴリズム) に依存できる限り、JavaScript は必要ありません:)

例については、以前の回答のhttp://jsfiddle.net/r9yrM/1/を参照してください。

各「セル」に最小限のパディングを設定することを忘れないでください。テキストが境界線に張り付いていると、あまり読みにくくなります (そして見苦しくなります)。

JS を使用すると、タブの最大数 (または最小の「妥当な」幅) を決定し、その数より上 (下) に、親にクラスを追加して、各タブをトリガーとしてレンダリングしたり、レンダリングしfloat: leftたりblockしないようにすることができtable-cellます。次に、2行以上を占有します（Firefoxの拡張機能Tab Mix Plusのように）

于 2012-06-01T16:00:41.160 に答える
0

私は今日同じ問題を解決しようとしました...多分私の解決策はあなたをもう少し助けます: http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/

HTML + CSS のみを使用しています...これまでのところ JS はありません。しかし、ブラウザー ウィンドウの実際の幅に反応するには、JS が必要だと思います。

于 2013-05-31T07:49:44.577 に答える
0

nav nav-tabs liレンダリング後に要素の幅を調整できます。

通常のサイズで親要素に収まるタブの数を計算し、最大数を超える各タブの単一のタブ幅のパーセンテージで各タブを縮小します。

于 2012-06-01T15:31:46.687 に答える