私は gridster プラグインを使用しています: http://gridster.net/また、ダッシュボードのレイアウト用のブートストラップも使用しています。ただし、ウィンドウのサイズを変更する際に問題が発生します。サイズ変更には次の関数を使用しています。
var resizeTimer;
jQuery(window).on('resize', function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
var newDashboardWidth = this.newDashboardWidth = $('#gridsterContainer').width();
var newbaseWidths = (newDashboardWidth) * (1- margin_ratio)/cols
gridster.resize_widget_dimensions({
widget_base_dimensions: [newbaseWidths]
});
},200);
});
これにより、ウィンドウの縮小時にコンテンツのサイズを変更できますが、ウィンドウを拡大してもコンテンツが通常の状態に戻らない場合、ブートストラップ css とグリッドスター css には、この問題を引き起こす競合するクラスがいくつかあると思います。これを修正する方法はありますか?また、私が考えていた1つの方法は、ブートストラップクラスに名前空間を提供することでした。その方法では、競合するクラスの場合、ウィンドウのサイズ変更は影響を受けません。問題を引き起こすクラスのみに名前空間を追加する方法に関するアイデア. 以下は、boostsrap の CSS です。
.pre-scrollable {max-height: 340px; overflow-y: scroll;}
.container { padding-right: 15px;padding-left: 15px;}
@media (min-width: 768px) {.container { width: 750px;}
@media (min-width: 992px) {.container {width: 970px;}
上記の例では、名前空間のみをメディア クエリに追加したいと思います。残りのすべてのクラスは同じままです。どうすればこれを達成できますか?