boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。
ヘッダーを固定したい場合
1 2 3 |
<nav class="navbar navbar-inverse navbar-fixed-top"> ・・・・・・ </nav> |
classにnav-fixed-topを入れてあげればOKです。
サイドバーを固定したい場合
1 2 3 4 5 6 7 |
<div class="row col-md-4"> <div class="sidebar-nav affix" role="complementary"> <ul class="nav"> ・・・・・・・ </ul> </div> </div> |
div classにaffixを入れ、bootstrap.cssに下記のCSSを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.bs-sidebar.affix { position: static; } @media (min-width: 992px) { .bs-sidebar .nav > .active > ul { display: block; } /* Widen the fixed sidebar */ .bs-sidebar.affix, .bs-sidebar.affix-bottom { width: 213px; } .bs-sidebar.affix { position: fixed; /* Undo the static from mobile first approach */ top: 80px; } .bs-sidebar.affix-bottom { position: absolute; /* Undo the static from mobile first approach */ } .bs-sidebar.affix-bottom .bs-sidenav, .bs-sidebar.affix .bs-sidenav { margin-top: 0; margin-bottom: 0; } |