nav-fill

bootstrap5.css

bootstrap5.css
.nav-fill > .nav-link,
.nav-fill .nav-item {
  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="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>

ナビゲ―ション項目の画面一杯: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>