Bootstrap Navbar 中央揃え解説
2024-09-10
レスポンシブなBootstrap Navbarでコンテンツを中央揃えする
日本語解説
BootstrapのNavbarは、ウェブサイトのヘッダー部分にナビゲーションリンクやロゴなどを配置するためのコンポーネントです。レスポンシブデザインに対応しているため、画面サイズが変わっても適切にレイアウトされます。
この解説では、BootstrapのNavbarでコンテンツを中央揃えする方法について説明します。
CSSコード
.navbar-nav {
justify-content: center;
}
解説
- .navbar-nav
BootstrapでNavbarのリンクを配置する要素です。 - justify-content: center;
このプロパティは、要素内のアイテムを水平方向に中央揃えします。
使い方
- BootstrapのCDNリンクまたはローカルファイルを読み込みます。
- HTMLファイルでNavbarを定義します。
- CSSファイルに上記のコードを追加します。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<t itle>Bootstrap Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3 87870xz+jk2+060607503525535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676
Bootstrap Navbar 中央揃え解説: コード例
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<t itle>Bootstrap Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3 87870xz+jk2+0606075035255358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795535816676067955358166760679553581667606795
Flexboxを使用する
.navbar-nav {
display: flex;
justify-content: center;
}
.display: flex;で要素をフレックスボックスレイアウトにします。
text-align: center;を使用する
.navbar-nav {
text-align: center;
}
- このプロパティは、要素内のテキストを水平方向に中央揃えします。ただし、リンクやボタンなどのブロックレベル要素は中央揃えされません。
カスタムCSSクラスを使用する
.navbar-nav-centered {
justify-content: center;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" dat a-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<s pan class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar- nav navbar-nav-centered">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-it em">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</ div>
</nav>
- カスタムクラス
navbar-nav-centeredを作成し、そのクラスをNavbarのナビゲーションリンク要素に適用します。
css twitter-bootstrap navbar
