記事詳細

投稿日
2026年02月07日16時58分
タイトル

bootstrap <div class="nav" の中のlink-buttonの水平方向の間隔を調整する方法は？

内容

Bootstrap の <div class="nav"> 内でリンクボタンの水平方向の間隔を調整しつつ、中央寄せにしたいんですね。
Bootstrap 5 なら、Flexbox ユーティリティとスペーシングユーティリティを組み合わせるのが簡単です。

1. 中央寄せする方法
.nav は display: flex なので、以下のクラスを追加すれば中央寄せできます。

Html
<div class="nav justify-content-center">
  <a class="btn btn-primary" href="#">Home</a>
  <a class="btn btn-secondary" href="#">About</a>
  <a class="btn btn-success" href="#">Contact</a>
</div>
  • justify-content-center → 水平方向の中央寄せ

2. 水平方向の間隔を調整する方法
Bootstrap のスペーシングユーティリティ（mx-* や gap-*）を使います。

方法A: gap を使う（推奨）

Html
<div class="nav justify-content-center gap-3">
  <a class="btn btn-primary" href="#">Home</a>
  <a class="btn btn-secondary" href="#">About</a>
  <a class="btn btn-success" href="#">Contact</a>
</div>
  • gap-3 → 子要素間の間隔を設定（gap-0〜gap-5）

方法B: 個別にマージンを付ける

Html
<div class="nav justify-content-center">
  <a class="btn btn-primary mx-2" href="#">Home</a>
  <a class="btn btn-secondary mx-2" href="#">About</a>
  <a class="btn btn-success mx-2" href="#">Contact</a>
</div>
  • mx-2 → 左右にマージンを追加

💡 ポイント

  • gap-* は Flexbox の間隔調整に便利で、レスポンシブ対応（例: gap-sm-4）も可能
  • .justify-content-center は .nav に直接付けるのがシンプル

もし「画面幅が狭いときは縦並びにしたい」場合は、flex-sm-column を組み合わせるとレスポンシブ対応もできます。

希望があれば、この中央寄せ＋間隔調整をレスポンシブ対応にしたコード例も作れますが、作りますか？
そうすればスマホでは縦並び、PCでは横並びにできます。

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Styles
編集 | 記事一覧