8

Twitter の Bootstrap プロジェクトを使用して、展開したり折りたたんだりするサイドバーを作成しようとしていますが、機能させることができません。基本的なコンテナと流体のレイアウトを出発点として使用しようとしています。サイドバーを適切に非表示にして、「コンテンツ」領域を画面の全幅に拡張することさえできません。代わりに、サイドバーのテキストは消えますが、コンテンツ エリアは拡大されません。サイドバーとコンテンツの幅を変更しましたが、変更できないようです。これについて助けてくれてありがとう。

私もここ見てきた

4

2 に答える 2

5

これは簡単に達成できます… 次のフィドルを参照してください。

ただし、これが要点です。基本的に、マウスを1秒間操作しないと、サイドバーが非表示になります。メインブロックの（contentサイドバーあり）と（サイドバーなし）を交換し、サイドバーを非表示にします。container-fluidそのように簡単です。

function onInactive(ms, cb){ 
    var wait = setTimeout(cb, ms); 
    document.onmousemove = document.mousedown =
    document.mouseup = document.onkeydown = 
    document.onkeyup = document.focus = 
    function(){
        clearTimeout(wait);
        wait = setTimeout(cb, ms);
}; }
var sidebar = $('div.sidebar'); 
var content = $('div.content');
$('body').live('mousemove', function(event) {
    sidebar.addClass('sidebar').fadeIn();
    content.addClass('content').removeClass('container-fluid');
});

onInactive(1000, function(){
    sidebar.fadeOut(300);
    content.removeClass('content').addClass('container-fluid');
});
于 2012-01-12T12:10:35.657 に答える
0

Bootstrap のレイアウトの問題は、それらが流動的でないことです。レイアウトにスパンクラスを使用する場合、それらは固定値です (bootstrap.css を参照してください)。さて、そうは言っても、彼らのコンテナ流体クラスは流体です-一種です。最小幅は 940 ピクセルに設定されており、サイドバー クラスで使用すると、240 ピクセルの余白があります。これが、サイドバーが折りたたまれていない理由です。

ブートストラップ css を変更するか (目的に反する、IMO)、「カスタム」スタイルシートを作成するか、ブートストラップ クラスをオーバーライドするインライン スタイルを使用し、ブートストラップ css を直接損なうことなく、ニーズに合わせてこれらのクラスを「ホットワイヤ」することができます。 （アップグレードが容易になります）。

于 2011-12-22T18:01:55.463 に答える