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