Fluid Twitter Bootstrap 2.0 でサイドバー ナビゲーションを修正する方法は?

Fluid Twitter Bootstrap 2.0 のサイドバー ナビゲーションを修正する

流動的なレイアウトでスクロール中に静止したままになるサイドバー ナビゲーションを実現するのは簡単です。

実装

CSS

新しいsidebar-nav-fixed クラスを定義してサイドバーを修正し、左マージンを補うためにコンテンツ div にオフセット クラスを追加します。

.sidebar-nav-fixed {
    position: fixed;
    left: 20px;
    top: 60px;
    width: 250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

更新されたオプション

レスポンシブな互換性のために、次の CSS を検討してください:

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width: auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position: static;
        width: auto;
    }
}

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav sidebar-nav-fixed">
                ...
            </div>
<!--/.well -->
        </div>
<!--/span-->
        <div class="span9">
            ...
        </div>
<!--/span-->
    </div>
<!--/row-->
</div><!--/.fluid-container-->

若干の幅があることに注意してくださいコンテナ div から幅を継承していないため、固定サイドバーに不一致があります。

代替方法

モバイル ビューでグリッドがドロップされるまでサイドバーを固定したままにするには、次の CSS を使用します。

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position: static;
        width: auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

以上がFluid Twitter Bootstrap 2.0 でサイドバー ナビゲーションを修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。