ブートストラップ4:上部の固定ナビゲーションバーをコンテナ内にとどめ、ストレッチしないようにする方法は?

固定ナビゲーションバーを親のdivコンテナ内にとどまらせる方法はたくさんあります。ここでは、最も簡単なものについて説明します。

Bootstrapドキュメントからわずかに変更された次のコードがあるとします。

Navbar  
  • Home (current)
  • Link
  • Link
hello
div.next { background-color: lightblue; width: 100%; height: 60rem; }

そして、あなたのページは次のようになります。

ソリューション

ドキュメントには「ナビゲーションバーとそのコンテンツはデフォルトで流動的です。オプションのコンテナを使用して水平方向の幅を制限してください」と書かれていますが、最も簡単な解決策は、CSSを使用してナビゲーションバーの幅を直接設定することです。

div.next { background-color: lightblue; width: 100%; height: 60rem; } .container { padding: 0px; } nav.navbar { width: inherit; top: 0%; left: 50%; transform: translateX(-50%); }

ルールターゲティング.containerとを追加することnav.navbarで、navbarは親のコンテナと同じ幅になります。