非常に小さい画面サイズで Bootstrap XS 列が正しく折り返されないのはなぜですか?

Bootstrap XS 列の折り返し問題の修正

Bootstrap のグリッド システムでは、画面幅が非常に小さくなったときに、最後の XS サイズの列が適切に折り返されない問題が発生する可能性があります。列を最大 12 個追加するように構成しても、配置動作が期待どおりにならない場合があります。

たとえば、次のコードを考えてみましょう。

<code class="html"><div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-1 col-xs-offset-8"></div>
        <div class="col-xs-1"></div>
    </div>
</div></code>

通常、画面サイズを縮小すると、最後の列は画面の最後に垂直に積み重なる必要があります。ただし、画面が臨界しきい値を超えて小さくなると、列が予期せず先頭に向かって折り返されます。

一部のユーザーは、コンテナの最小幅を指定する CSS コードの追加を検討しています。ただし、Bootstrap 内に代替ソリューションが存在します。

問題の説明

この動作は、GitHub (https://github.com/twbs) に記載されている既知の問題に起因しています。 /bootstrap/issues/13221)。画面幅が 360 ピクセルより狭い場合、列の幅が 8.333333% に設定され、両側のパディングが 15 ピクセルになるため、.col-xs-1 列は折り返され始めます。この非対称性により不一致が生じ、ブラウザが列をスタックするようになります。

問題の回避

折り返しを防ぐには、.col-xs-1 を使用しないでください。非常に小さな画面。さらに、画面のサイズが現実的に 360 ピクセル未満に変更される可能性があるかどうかを評価します。ほとんどのシナリオでは、これは頻繁に発生するものではありません。

注: Bootstrap 4 では、.col-xs-1 は .col-1 に置き換えられました。

関連する問題:

• [ブートストラップ グリッドの侵入最小サイズ](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in-smallest-size)

以上が非常に小さい画面サイズで Bootstrap XS 列が正しく折り返されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。