web-dev-qa-db-ja.com

流動的なTwitter bootstrap 2.0のサイドバーナビゲーションを修正

流体レイアウトのスクロールでサイドバーナビゲーションを常に固定したままにすることは可能ですか？

csstwitter-bootstrapcss-positionfluid-layout
92
sl_bug

注：これを行うbootstrap jQueryプラグインがあり、この回答が書かれた後、いくつかのバージョンが導入されました。 （ほぼ2年前） Affix と呼ばれます。この回答は、Bootstrap 2.0.4以前を使用している場合にのみ適用されます。

はい、単純にサイドバーの新しい固定クラスを作成し、コンテンツdivにオフセットクラスを追加して、左マージンを補います。

CSS

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

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

デモ： http://jsfiddle.net/U8HGz/1/show/ ここで編集： http://jsfiddle.net/U8HGz/1/

更新

レスポンシブbootstrapシートをサポートするようにデモを修正し、ブートストラップのレスポンシブ機能でフローするようになりました。

注：このデモは上部の固定navbarを使用するため、画面のサイズを変更すると両方の要素がposition:staticになります。モバイルビューの画面が落ちるまで固定サイドバーを維持する別のデモを下に配置します。

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;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

デモ 、編集 ここ 。

マイナーノート：固定サイドバーの幅には約10px/1％の差がありますが、これはspan3コンテナdivから幅を継承しないため、固定されているため、幅。十分近いです。

また、小さな画面/モバイルビューのグリッドがドロップするまでサイドバーを固定したい場合は、別の方法があります。

CSS

.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;
    }
}

デモ 、編集 ここ 。

168
Andres Ilich

最新のBoostrap（2.1.0）には、このタイプのアプリケーション（FYI）専用の新しいJS "affix"機能があります。

46
Joyrex

これはレスポンシブWebdesignを台無しにします。メディアクエリで固定サイドバーをより適切にラップします。

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

サイドバーは、ビューポットが768pxよりも大きい場合にのみ修正されるようになりました。

27
HaNdTriX

これはjavascriptなしでは不可能です。私はaffix.jsが複雑すぎると思うので、私はむしろ使用します：

stickyfloat

1
Zuhaib Ali

現在のBootstrapバージョン（3.3.2）では、ナビゲーション用の固定サイドバーを実現する良い方法があります。

このソリューションは、再導入されたcontainer-fluidクラスでもうまく機能します。つまり、レスポンシブなフルスクリーンレイアウトを簡単に作成できます。

通常、固定幅とマージンを使用する必要があります。そうしないと、ナビゲーションがコンテンツとオーバーラップしますが、空のプレースホルダー列の助けを借りて、コンテンツは常に正しい場所に配置されます。

以下のセットアップでは、ウィンドウのサイズを768px未満に変更するとコンテンツがラップされ、固定ナビゲーションが解除されます。

実際の例については、 http://www.bootply.com/ePvnTy1VII をご覧ください。

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>
0
Christian.D

私はアンドレスの回答から始めて、次のようなスティッキーなサイドバーを取得しました。

HTML：

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS：

.sidebar-nav-fixed {
  position:fixed;
}

JS/jQuery：

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

ビューポートのサイズが変更されたときに 'sidebarwidth'変数を更新するためにJSも必要だと思います。

0
mdashx

修正navまたは必要なすべてのタグを取得するのは非常に簡単です。必要なのは、このように修正タグを記述して、それをあなたのボディセクションに入れることです

   <div style="position: fixed">
       test - try  scroll again. 
   </div>
0
verdier