固定サイドバーは Fluid Bootstrap 2.0 レイアウトに実装できますか?

Fluid Bootstrap 2.0 レイアウトでの固定サイドバーの維持

問題: サイドバー ナビゲーションを固定したままにすることは可能ですか?スクロール中の流体レイアウトは問題ありませんか?

解決策: はい、可能です。方法は次のとおりです:

1. サイドバーの固定クラスを作成します:

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

2. オフセットを適用しますclass をコンテンツ div:

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

この CSS は、スクロール中にサイドバーが固定された状態を維持し、サイドバーの幅を補うためにコンテンツ領域を調整します。

洗練されたソリューション:

• 更新: Bootstrap のレスポンシブ レイアウトをサポートするために、デモは次の 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;
    }
}

• 代替アプローチ: レイアウトがモバイル表示に切り替わるまで固定サイドバーを維持するには:

.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;
    }
}

注: Bootstrap 2.0。 4 以前のバージョンには、サイドバー要素を修正するための高度な機能を提供する Affix jQuery プラグインがありません。このソリューションは、以前のブートストラップ バージョンにのみ適用されます。

以上が固定サイドバーは Fluid Bootstrap 2.0 レイアウトに実装できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。