Bootstrap xs 列が 360px 未満にスタックされずに折り返されるのはなぜですか?

ブートストラップ: xs 列が予期せずラップする

ブートストラップ フレームワークは、柔軟で効率的なレイアウトを作成するためのユーティリティを提供することで、レスポンシブ デザインを簡素化します。ただし、特に極小 (xs) サイズの場合、列が予期したとおりに動作しない場合、ユーザーは予期しない問題に遭遇することがあります。

問題: xs 列がスタックではなく折り返される

通常、行が列の合計は 12 になります。画面の幅が狭くなるにつれて、列は垂直に積み重なる必要があります。ただし、小さい画面では、列が予期せず画面の最後ではなく画面の先頭に向かって折り返されることがあります。

原因: ブラウザの不一致

この動作は、ブートストラップの既知の問題によって発生します。画面幅が 360 ピクセル未満の場合、幅 1% (col-xs-1) の列がコンテナ内に適切に収まらない可能性があります。 1% の幅を指定しているにもかかわらず、両側の 15 ピクセルのパディングにより列が実質的に広くなり、ブラウザのレイアウト エンジンとの不一致が生じます。

解決策: 小さい画面では、col-xs-1 を使用しないでください

この問題を回避するには、360 ピクセルより小さい画面ではcol-xs-1 を使用しないことを検討してください。ユーザーがこの制限を下回って画面のサイズを変更することをアプリケーションが実際に想定しているかどうかを判断します。

Bootstrap 4 に関する注意

Bootstrap 4 では、col-xs-1 クラスの名前がcol-1 に変更されました。上記の問題は、Bootstrap 4 のcol-1 にも依然として当てはまります。

以上がBootstrap xs 列が 360px 未満にスタックされずに折り返されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。