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; /* テキストの場合 */
}

コメント

タイトルとURLをコピーしました