ホームページ > ウェブフロントエンド > CSSチュートリアル > XS サイズでブートストラップ列が正しくラップされないのはなぜですか?

XS サイズでブートストラップ列が正しくラップされないのはなぜですか?

Linda Hamilton
リリース: 2024-10-31 04:45:30
オリジナル
1085 人が閲覧しました

Why Do Bootstrap Columns Not Wrap Correctly at XS Size?

最小サイズ (XS) でのブートストラップ列ラッピング

人気のフロントエンド フレームワークであるブートストラップは、開発者が柔軟なレイアウトを作成できる応答性の高いグリッド システムを提供します。さまざまな画面サイズに合わせて調整します。ただし、最小サイズのブレークポイント (XS) を使用するときに発生する一般的な問題は、画面幅が特定の制限を超えて減少すると列が期待どおりに折り返されないことです。

この問題は、列の合計幅が 12 であるために発生します。 (例:

< div class="col-xs-1">
) は、各列のパディングが最小限であるため、正しく折り返されない可能性があります。 Bootstrap の .col-xs-1 列には 15 ピクセルのパディングがあり、狭い画面では途中で折り返される可能性があります。

既知の問題:

この問題は確認されています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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート