bootstrap4

bootstrap4.css

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

bootstrap4.css

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

bootstrap4.css

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

bootstrap4.css

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

■ナビゲーションバー：navbar：コンポーネント：ナビゲーション：div要素を使用したナビゲーション

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">リンク1<span class="sr-only">(現位置)</span></a>
        <a class="nav-item nav-link" href="#">リンク2</a>
        <a class="nav-item nav-link" href="#">リンク3</a>
        <a class="nav-item nav-link disabled" href="#">無効</a>
      </div>
    </div>
  </nav>

■ナビゲーションバー：navbar：コンポーネント：ナビゲーション：ul要素を使用したナビゲーション

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
      </ul>
    </div>
  </nav>

■ナビゲーションバー：navbar：コンポーネント：ナビゲ―ション項目の幅を調整 nav要素を使用したナビゲーション

    <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>

■ナビゲーションバー：navbar：コンポーネント：ナビゲ―ション項目の幅を調整 nav-fillクラスが無い時

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーションバー：navbar：コンポーネント：ナビゲ―ション項目の幅を調整 nav-fillクラスを追加した時

    <ul class="nav nav-pills nav-fill">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーションバー：navbar：コンポーネント：flexユーティリティを利用したレスポンシブなナビゲーション

  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

■ナビゲーションバー：navbar：コンポーネント：ピル型ナビゲーション

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーションバー：navbar：コンポーネント：ドロップダウンを組み込んだピル型ナビゲーション

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーションバー：navbar：コンポーネント：タブ型ナビゲーション

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーションバー：navbar：コンポーネント：ドロップダウンを組み込んだタブ型ナビゲーション

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーション水平方向、均等：nav：コンポーネント：ナビゲーション:水平方向

    <ul class="nav">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーション水平方向、均等：nav：コンポーネント：ナビゲーション:中央寄せ

    <ul class="nav justify-content-center"><!-- 中央寄せ -->
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーション水平方向、均等：nav：コンポーネント：ナビゲーション:右寄せ

    <ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーション水平方向、均等：nav：コンポーネント：ナビゲーションを垂直（縦）に並べる：ul要素

    <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

■ナビゲーション水平方向、均等：nav：コンポーネント：ナビゲーションを縦に並べる：nav要素、li使わないaのみ

    <nav class="nav flex-column">
    <a class="nav-link active" href="#">アクティブ</a>
    <a class="nav-link" href="#">リンク</a>
    <a class="nav-link disabled" href="#">無効</a>
  </nav>