ブートストラップ グリッド クラスの数値はどのようにレイアウトを制御しますか?

Bootstrap のグリッド システムを理解する

Bootstrap では、グリッド システムにより、col-md-4、 Col-xs-1、およびcol-lg-2。これらのクラスは、数値を活用してグリッドの配置、使用法、表現を決定します。

数値によるグリッドの配置の決定方法

これらのクラス名の数字 (1 ～ 12) は、何を意味しますか特定のグリッド列がまたがるコンテナーの幅の割合。たとえば、col-*-6 は合計 12 列のうちの 6 列にまたがり、col-*-12 は全幅 (12 列) にまたがります。

数値の活用

これらの数値を効果的に使用するには、コンテナーが 12 個の等しい列に分割されていると想像してください。クラスに特定の番号を割り当てることで、列がコンテナーをどのように占有するかを正確に定義できます。たとえば、コンテナ内でcol-xs-6を2回使用すると、コンテナ全体を埋める2つの同じサイズの列が作成されます。

数値の表現

数値クラス名の は、それぞれのコンテナ サイズ内でグリッド要素がまたがる列の数を表します。たとえば、col-xs-6 は、要素が極小画面 (携帯電話) 上でコンテナの幅の半分を占めることを示します。

レスポンシブ デザインの影響

ブートストラップでは、いくつかの機能が提供されます。 xs、sm、md、lg などの列クラスを使用して、さまざまな画面サイズに対応します。これらのクラス プレフィックスは、特定のグリッド構成が有効になる画面サイズを決定します。異なるプレフィックス (例:col-xs-6col-md-4) を持つクラスを組み合わせることで、使用するデバイスに基づいて適応する応答性の高いレイアウトを作成できます。

複数の画面サイズのサポート

要素に複数の列クラスを割り当てる場合、指定されたグリッド構成は対応する画面サイズ以上に適用されます。たとえば、別の宣言によってオーバーライドされない限り、col-xs-6col-md-4 は、超小型および小型の画面では 6 列にまたがり、中および大型の画面では 4 列にまたがります。

注: xs クラスが指定されていない場合、要素はデフォルトでcol-xs-12 になります。これは、極小画面では幅全体にまたがることを意味します。

オーバーフロー処理

コンテナ内で 12 列を超えると、オーバーフローした要素が現在の行内で折り返されるのではなく、次の行に表示されることに注意してください。

以上がブートストラップ グリッド クラスの数値はどのようにレイアウトを制御しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。