6

私はブートストラップ 3 を使用してサイトをセットアップしています。アイデアは、ナビゲーション用に予約された左側の列と、サイトのコンテンツの右側にあることです。

http://jsbin.com/iQIKUli/3

ナビゲーションの位置は固定し、左と上に余白を設けないでください。私は position:fixed と position:absolute を試しましたが、問題はサイトのコンテンツがナビゲーションバーを上書きすることです。

左側に固定ナビゲーションバーを適切に作成するにはどうすればよいですか? サイトのコンテンツがナビゲーション バーを上書きしないようにするにはどうすればよいですか?

どうもありがとうございました！

4

3 に答える 3

1

現在の Bootstrap バージョン (3.3.2) では、ナビゲーション用の固定サイドバーを実現する優れた方法があります。

このソリューションは、再導入されたコンテナ流体クラスでもうまく機能します。つまり、レスポンシブなフルスクリーン レイアウトを簡単に実現できます。

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

以下の設定では、ウィンドウのサイズを 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>

https://stackoverflow.com/a/28238515/3891027で私の回答を参照してください。

于 2015-01-30T15:00:10.543 に答える