Swiper.jsとBootstrapでレイアウトが崩れた時の話

Bootstrapのrowcolを使ったレイアウトの中でSwiper.jsを使おうとしたら、幅がおかしくなった。

現象

rowの中にcolを3つ入れて、横並びレイアウトをしていて、そのcolの中にSwiper.jsを入れたら、そのcolが横幅いっぱいに広がってしまった。

原因

flex関連の干渉が原因?

解決方法

以下のように、swiper-wrapperpositionabsoluteにする。