ホームページ > 記事 > ウェブフロントエンド > XS サイズでブートストラップ列が正しくラップされないのはなぜですか?
XS サイズでブートストラップ列が正しくラップされないのはなぜですか?
- Linda Hamiltonオリジナル
- 2024-10-31 04:45:30954ブラウズ
最小サイズ (XS) でのブートストラップ列ラッピング
人気のフロントエンド フレームワークであるブートストラップは、開発者が柔軟なレイアウトを作成できる応答性の高いグリッド システムを提供します。さまざまな画面サイズに合わせて調整します。ただし、最小サイズのブレークポイント (XS) を使用するときに発生する一般的な問題は、画面幅が特定の制限を超えて減少すると列が期待どおりに折り返されないことです。
この問題は、列の合計幅が 12 であるために発生します。 (例:
< div class="col-xs-1">既知の問題:
この問題は確認されていますBootstrap GitHub リポジトリ: https://github.com/twbs/bootstrap/issues/13221.
解決策:
この問題を回避するには、次のことを考慮してください。提案:
- 非常に小さな画面では .col-xs-1 列を使用しないでください: 代わりに、.col-xs-2 や .col-xs などの大きな列を使用してください。 -3.
- 画面サイズを考慮します: 画面のサイズが現実的に 360 ピクセル未満に変更されるかどうかを判断します。ほとんどの場合、これは起こりそうにありません。
Bootstrap 4 に関する注意:
Bootstrap 4 では、.col-xs-1 の名前が に変更されました。列-1。幅 360 ピクセル未満の画面上の .col-1 列でも同じ問題が発生する可能性があります。
関連問題:
ブートストラップ ユーザーもグリッドに関する同様の問題を報告しています。最小サイズでの中断: https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size
以上がXS サイズでブートストラップ列が正しくラップされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。