13

Twitter Bootstrap を使用して、次のレイアウトを使用してレスポンシブ サイトを作成しています (この質問のために簡略化されています)。

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class="span7">
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>

ブラウザー ウィンドウがタブレット サイズにサイズ変更されると、rightColumn div は予想どおり非表示になりますが、mainContent div の横に空白が残ります (サイズは span3)。

mainContent div を全幅に拡張したい (そのため、サイズが span10 に一致します)。

次の jQuery コードを使用して、mainContent div のクラス名を動的に変更し、これを実現しています (期待どおりに動作します)。

$(document).ready(function() {
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {
        if ($window.width() < 980) {
            $('#mainContent').removeClass('span7').addClass('span10');
            };

        if ($window.width() >= 980) {
            $('#mainContent').removeClass('span10').addClass('span7');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

私の質問: これは、ブラウザー ウィンドウのサイズが変更されたときに Twitter Bootstrap でスパンへの変更を処理するための推奨される方法ですか? または、タブレットの画面サイズの span7 の CSS を span10 の CSS に一致するように変更する必要がありますか?

4

2 に答える 2

17

私は自分で答えます: Javascript コードを削除し、Bootstrap CSS への次の単純な変更に置き換えて、タブレットの画面サイズの span7 の幅を span10 と同じ幅に変更しました。

@media (max-width: 979px) and (min-width: 768px) {
    .row-fluid .span7 {
    width: 82.87292817100001%;
    }
}
于 2012-08-11T20:35:08.960 に答える
0

ただし、メディア クエリは ie8 以下では機能しません。js を修正した方が良いと思います。とにかく、ie8 は span3 を隠すつもりはありません。

しかし、ここに私が使用するものがあります。その div からクラス span7 を削除すると、 #mainContent の幅を明確に設定するスタイルがない場合、残りの幅の 100% が自動的に使用されます。

<div class="container-fluid">
    <div class="row-fluid">
        <!-- Left menu -->
        <div class="span2">
            <div class="sidebar-nav">
                MENU CONTENT GOES HERE
            </div>
        </div>

        <!-- Content -->
        <div id="mainContent" class=""> <!-------------remove the span7---->
            MAIN CONTENT GOES HERE
        </div>

        <!-- Right column -->
        <div id="rightColumn" class="span3 hidden-phone hidden-tablet">
            RIGHT COLUMN GOES HERE
        </div>
    </div>
</div>
于 2013-06-07T14:49:37.743 に答える