Bootstrapのグリッドシステムでoverflowをscrollさせる方法

特定の要素下（row）で
Bootstrapのグリッドシステムを折り返しなしで横スクロールさせる方法を記します。

構造としては、下記の通り。

row

col-4 | col-4 | col-4 | col-4

ただ、タグにクラスを指定するだけでは、折り返されてしまいます。

その原因が、

「row」のflex-wrapがwrapになっているためです。

flex-wrap:wrapの場合、要素幅を超えてしまう場合、自動で折り返されます。
そのため、「row」クラスと同じ要素に「flex-wrap:nowrap」を指定することで解決します。

もし、効かない場合は、「flex-wrap:nowrap !important;」と指定しましょう。

例 )
div.row.wrap
p.col-4
p.col-4
p.col-4

wrap {
flex-wrap:nowrap;
overflow-x:scroll;  /* autoでも可能 */
white-space:nowrap; /*　テキストの場合 */
}