流動的な Twitter Bootstrap 2.0 レイアウトで固定サイドバー ナビゲーションを作成する方法

Fluid Twitter Bootstrap 2.0 での固定サイドバー ナビゲーションの作成

Fluid Bootstrap 2.0 レイアウトでは、スクロール中に固定サイドバー ナビゲーションを維持することができます。達成。方法は次のとおりです:

1. カスタム サイドバー クラスの作成:
   固定サイドバーの CSS クラス (.sidebar-nav-fixed など) を定義します。位置 (固定、上部、幅) などのプロパティを割り当てます。
2. オフセット コンテンツ クラスの作成:
   固定サイドバーによって作成された左マージンを補正するには、オフセット クラスを追加します。コンテンツ部門へ。たとえば、.row-fluid > .span-fixed-sidebar には、固定サイドバーの幅と等しい margin-left プロパティを設定できます。

3. 更新された CSS:

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

   ログイン後にコピー

4. レスポンシブな変更:
   さまざまな画面サイズに適応するには、メディア クエリの使用を検討してください。例:

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

   ログイン後にコピー

5. モバイル ビューの追加メソッド:
   小さな画面で静的になるまで固定サイドバーを維持するには、次のように CSS を調整します。

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

   ログイン後にコピー

注: 2.0.4 以降の Bootstrap バージョンの場合は、同様の機能を提供する Affix jQuery プラグインの使用を検討してください。

以上が流動的な Twitter Bootstrap 2.0 レイアウトで固定サイドバー ナビゲーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。