css - ブレークポイントで固定トップ ナビゲーション バーを静的トップ ナビゲーション バーに変える

Question

私はうまく機能する固定トップナビゲーションバーを持っています。画面が小さくなると (たとえば 720 ピクセル以下)、固定トップ ナビゲーション バーを固定トップ ナビゲーション バーに変換するにはどうすればよいですか?

Answer 1

まず、あなたのクラスは間違っていnavbar-fixed-topますnavbar-static-top。次に、これらのクラスに対する Bootstrap のスタイルは次のとおりです。

.navbar-static-top {
  border-width: 0 0 1px;
}

@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  border-width: 0 0 1px;
}

@media (min-width: 768px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}

あなたができることは、画面が希望の幅よりも小さい場合に、 「なりたい」( navbar-static-top)クラスのスタイリングをクラス ( ) に適用することです。navbar-fixed-top個人的には、彼らがすでに使用している 768px を使い続けたいと思います。その場合は、これをカスタム CSS のブートストラップ CSS の後に追加します。

.navbar-fixed-top {
  position: relative;
  border-width: 0 0 1px;
}