Bootstrapには、グリッドシステムを扱うためのcol-mdやcol-md-autoといったクラスが存在します。しかし、これらのクラスを使って配置した要素に、例えばSwiper.jsのスライダーなどを適用すると、レイアウトが崩れることがあります。
これは、col-mdクラスがデフォルトでmin-width: autoと設定されているためです。そして、min-width: autoは元のコンテンツサイズに基づいて幅を確保しようとする特性があります。
これを解消するには、min-width: 0;と設定します。これにより、要素の幅は内容に関係なく親要素にフィットするようになり、レイアウトが崩れる問題を防ぐことができます。
しかし、この背後にある仕組みは少々複雑です。詳細については、以下のリンク先のStack Overflowの質問を参照してください。
Why don't flex items shrink past content size?
I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, ...
stackoverflow.com
Comment