流動的なレイアウトの場合、カスタム クラスを実装することでスクロール時にサイドバー ナビゲーションを固定できます。
サイドバーの固定位置を制御する .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 構造を使用して、固定サイドバーを実装します:
<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 サイトの他の関連記事を参照してください。