Bootstrapの構築を行うと、Navbar(ナビゲーションバー)の高さを、高くしてほしいと言われることが多いです。
今回はお手軽にできるNavbarの高さを変更します。
高さ調整
最もお手軽に高さを調整するには、BootstrapのSpacingクラスを利用します。
Spacing プロパティ
- m : margin(マージン)をセット
- p : padding(パディング)をセット
場所
- t : margin-top or padding-top
- b : margin-bottom or padding-bottom
- l : margin-left or padding-left
- r : margin-right or padding-right
- x : both *-left and *-right
- y : both *-top and *-bottom
- blank : 全ての場所
サイズ
- 0 : 0
- 1 : デフォルト の 0.25倍
- 2 : デフォルト の 0.5倍
- 3 : デフォルト
- 4 : デフォルト の 1.5倍
- 5 : デフォルト の 3倍
- auto : auto
利用例
mt-4 : margin-topをデフォルトの1.5倍に指定 p-5 : paddingをデフォルトの3倍に指定
挿入箇所は、「nav」タグに対して、padding(p-*)を入れます。
<nav class="navbar navbar-expand-lg navbar-light bg-light p-4">

今回は手軽にNavbarの高さを高く調整しましたが、低くする場合は、p-1、p-2を指定ください。