Bootstrapのnavタブで横スクロールを許可し縦スクロールを防ぐ方法

Bootstrapのnavタブでタブが横スクロールできるように設定する方法と、縦スクロールを防ぐためのスタイル調整方法を紹介します。

まず、タブを横スクロール可能にするために、次のスタイルを適用します：

overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;

しかし、このスタイルを適用すると縦スクロールも発生してしまいます。そこで、Bootstrapのスタイルを以下のように調整します。

まず、既存のスタイルは以下の通りです：

.nav-tabs .nav-item {
    margin-bottom: -1px;
}

これを次のように変更します：

.nav-tabs .nav-item {
    margin-bottom: 0;
}