bootstrap4のタブを横スクロール化したい

Question

Bootstrapのタブを使っています。
https://getbootstrap.jp/docs/4.5/components/navs/#tabs

このタブ項目が増えると多段になってしまうので、横スクロールを使えるようにして対応したいと思っていますが、うまく動作しません。
横スクロールを表示させるにはどうしたらよいでしょうか？

HTML

<div class="container-fluid">
  <nav class="horizon-tabs">
    <ul class="nav nav-tabs justify-content-center">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">SampleA</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">SampleB</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">SampleC</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">SampleD</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">SampleE</a>
      </li>
    </ul>
  </nav>
</div>

CSS

.horizon-tabs {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Answer 1

これでどうでしょうか？

.nav {
	flex-wrap: nowrap;
}

Comments

[退会済みユーザー]

この対応でスクロールできるようになりましたが、何故か左端までスクロールができずsampleAのタブが全部表示できないようなので、実用するのは難しそうですね・・・