web-dev-qa-db-ja.com

Bootstrap3：左側のナビゲーションを修正

bootstrap 3でサイトを設定しています。左側にナビゲーション用に予約された列があり、右側にサイトのコンテンツがあります。

http://jsbin.com/iQIKUli/

ナビゲーションの位置は固定され、左側と上部に余白がないようにする必要があります。 position：fixedとposition：absoluteを試してみましたが、問題はサイトのコンテンツがナビゲーションバーを上書きすることです。

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

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

csstwitter-bootstrapcss-positiontwitter-bootstrap-3navbar
6
FrancescoMussi

BS3にはrow-fluidがなくなったため、外側のcontainerを削除し、「row」を使用することをお勧めします。

http://bootply.com/92472

1
Zim

現在の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 で私の答えを参照してください。

1
Christian.D

私が正しく理解している場合は、.navigationクラスを次のような新しいdivに配置します。

<div class="col-xs-4 col-md-2">
     <div class="navigation">
          <h1>Navigation</h1>
     </div>
</div> <!-- /col-md-2 navigation -->

そして、position: absolute;クラスでposition: fixed;を.navigationに変更します

1
hippojamba