Navbarの高さを調整する方法:Bootstrap 4

 

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を指定ください。

 

関連タグ:

この記事をシェアする

次へ
前へ