固定サイドバーは Fluid Bootstrap 2.0 レイアウトに実装できますか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-11-08 17:14:02

オリジナル

480 人が閲覧しました

Can a Fixed Sidebar Be Implemented in a Fluid Bootstrap 2.0 Layout?

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

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

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

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

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

ログイン後にコピー

オフセットを適用します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 サイトの他の関連記事を参照してください。