22

Twitterのbootstrap v2で、列とマップを使ってレスポンシブなレイアウトを作りたいです。

アイデアは、maps.google.com のような UI を構築することですが、bootstrap2 でレスポンシブ デザインを使用します。

デスクトップ用のスタイルが欲しい

  • 上部のナビゲーションバー
  • 左の 1 列 (サイドバーとして)
    • 高さ: 100% マイナス navbarHeight、スクロールバーあり
    • 幅: .span3
  • 画面の残りの部分を満たすコンテンツ

それから、レスポンシブ モバイル デザインの場合、全高があるパーツは、コンテンツに応じて高さを持たせたいと考えています。

私はよりよく説明するためにスケッチを作りました スケッチ

編集：このようなことをしようとしていますが、反応がよく、北（ナビゲーションバー）、西（サイドバー）、中央（コンテンツ）のみで

EDIT2:最終的にjqueryで作ったのですが、CSSで解決したいです。誰かが尋ねたら、解決策を答えにします。

EDIT3：わかりました、これがJQueryを使って見つけた解決策です（プレーンなjsで簡単にできると思います）

$(window).bind('resize', function() {
    if ( $(window).width() > 980 ) {
        $("#content").height(($(window).height()-40)+"px")
        $("#sidebar").height(($(window).height()-58)+"px")
        $("body").css("padding-top","40px")
    }
    else {
        $("#content").height(($(window).height()-50)+"px")
        $("#sidebar").height(($(window).height()-68)+"px")
        $("body").css("padding-top","0px")            
    }

    $("#sidebar").css("overflow", "auto")
    $("body").css("padding-bottom","0px")
    $(".navbar").css("margin-bottom","0px")
});

$(selector).css()関数と条件ifは、プレーンな CSS と CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsiveのメディア クエリに置き換えることができます。

しかし問題は、それ$(window).height()が計算された実行時間であることです。これはおそらく CSS の a のようなものに置き換える必要があり、それでheight:100%うまくいく可能性がありますが、その100%高さを配置する適切な場所が見つかりませんでした。

EDIT4:ここで、CSSのみのソリューションである可能性があるものを見つけました! 進展があれば、回答を投稿します！ http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

4

3 に答える 3

1

今週の私の調査から (私は同じことを達成しようとしています)、ブートストラップと高さ 100% のデザインは、純粋な CSS の観点からは互換性がないようです (ブートストラップを変更したい場合を除きます)。あなたのjqueryソリューションに興味があります。

于 2012-04-11T22:42:12.463 に答える
0

JQueryを使用して見つけたソリューションは次のとおりです（プレーンjsで簡単に実行できると思います）

$(window).bind('resize', function() {
    if ( $(window).width() > 980 ) {
        $("#content").height(($(window).height()-40)+"px")
        $("#sidebar").height(($(window).height()-58)+"px")
        $("body").css("padding-top","40px")
    }
    else {
        $("#content").height(($(window).height()-50)+"px")
        $("#sidebar").height(($(window).height()-68)+"px")
        $("body").css("padding-top","0px")            
    }

    $("#sidebar").css("overflow", "auto")
    $("body").css("padding-bottom","0px")
    $(".navbar").css("margin-bottom","0px")
});

$(selector).css()関数と条件ifは、プレーンな CSS と CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsiveのメディア クエリに置き換えることができます。

しかし問題は、それ$(window).height()が計算された実行時間であることです。これはおそらく CSS の a のようなものに置き換える必要があり、それでheight:100%うまくいく可能性がありますが、その100%高さを配置する適切な場所が見つかりませんでした。

于 2015-07-08T19:21:59.310 に答える
0

あなたが探しているものを完全に理解しているかどうかはわかりませんが、トップ メニューがあるhttp://reactivewebdesign.net/Chicago/Trafficを見てください (ブートストラップ ナビゲーション バーの追加は簡単なはずです)。

左の列は 3 列にまたがり、マップは 9 列を占めます。左側のメニューに「 Where Am I 」という名前のリンクもあり、これも Google マップを使用しています。マップの CSS はページの上部にあります。マップを 3 つの列に絞り込みたい場合は、3 と 9 を 9 と 3 に逆にするだけです。それでも機能するはずです。

お役に立てれば。

于 2012-04-06T20:48:45.327 に答える