Bootstrap XS 列が予期せずラップするのはなぜですか?

Bootstrap XS の列ラッピングの問題

画面幅が超小さいサイズに縮小されると、予期しない列の動作が発生しますか?もしそうなら、あなたは一人ではありません。この問題は、Bootstrap の XS 列クラス (Bootstrap 4 ではcol-x) で発生します。

原因:

この問題は、XS 列に幅を設定すると、両側にパディングもあります。このパディングにより列が意図した幅を超える可能性があり、画面が狭くなりすぎると予期しない折り返し動作が発生する可能性があります。

解決策:

ブートストラップには現在、この問題を解決する組み込みの方法ですが、一般的な解決策は、画面幅が 360px 未満の場合は、col-XS-1 (または Bootstrap 4 のcol-1) の使用を避けることです。

あるいは、 CSS を使用してコンテナの最小幅を設定し、非常に小さな画面でも適切にレンダリングできる十分なスペースを列に確保することを検討できます。

追加メモ:

Bootstrap 4 では、col-XS-1 クラスの名前がcol-1 に変更されました。ただし、この問題はこのクラスでも引き続き発生します。

以上がBootstrap XS 列が予期せずラップするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。