ホームページ > ウェブフロントエンド > CSSチュートリアル > Fluid Bootstrap 2.0 でスクロール時にサイドバーを固定する方法は?

Fluid Bootstrap 2.0 でスクロール時にサイドバーを固定する方法は?

Linda Hamilton
リリース: 2024-11-08 22:35:02
オリジナル
283 人が閲覧しました

How to Keep the Sidebar Fixed on Scroll in Fluid Bootstrap 2.0?

Fluid Bootstrap 2.0 でスクロール時にサイドバーを固定する

流動的なレイアウトの場合、カスタム クラスを実装することでスクロール時にサイドバー ナビゲーションを固定できます。

カスタム CSS

サイドバーの固定位置を制御する .sidebar-nav-fixed クラスを作成し、.row-fluid > を追加します。 .span-fixed-sidebar をコンテンツ コンテナに追加して、サイドバーのマージンをオフセットします。 CSS は次のとおりです:

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

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}
ログイン後にコピー

HTML 構造

次の HTML 構造を使用して、固定サイドバーを実装します:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav sidebar-nav-fixed">
        ...
      </div>
    </div>
    <div class="span9">
      ...
    </div>
  </div>
</div>
ログイン後にコピー

詳細設定

より柔軟に、CSS メディア クエリを使用して、画面サイズに基づいてサイドバーの位置を調整します。以下に例を示します。

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position:static;
        width: auto;
    }
}
ログイン後にコピー

この構成では、小さい画面またはモバイル ビューで画面サイズが小さくなるまで、サイドバーが固定されます。

以上がFluid Bootstrap 2.0 でスクロール時にサイドバーを固定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート