nav-fill

bootstrap5.css

bootstrap5.css

.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

html bootstrap5 Sample

ナビゲ―ション項目の幅を調整：nav-fill

  <!-- 収まらない場合は、改行される -->
  <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>