col-mdクラスのmin-widthプロパティについて

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

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール