「col-md-4」、「col-xs-1」、および「col-lg-2」はブートストラップ グリッド システムでどのように機能しますか?

ブートストラップのグリッド システム: "col-md-4"、"col-xs-1"、および "col-lg-2" について

Bootstrap グリッド システムを使用すると、さまざまな画面サイズで要素のレイアウトと配置を制御できます。 「col-」クラスは、数値と組み合わされて、このシステムで重要な役割を果たします。

数値がグリッドを整列させる方法

「col-*」の数値" クラスは、コンテナの合計幅に対する列の幅を表します。各コンテナには合計 12 カラムを収容できます。したがって、「col-md-6」は 12 列のうち 6 列を占めることになり、コンテナの幅の半分の列になります。

数値の使用

これらの番号を使用するには、適切な「col-」クラスとその後に番号を含めるだけです。たとえば、クラス「col-xs-3」の div は、超小型画面 (携帯電話など) では 3 列を占有しますが、クラス「col-sm-6」の div は、小型画面では 6 列を占有します。

内容

「col-*」内の数字は、ブートストラップで定義された応答ブレークポイントを表します。 xs、sm、md、および lg の文字は、

• xs: 極小 (携帯電話)
• sm: 小型 (タブレット)
• md:中 (一部のデスクトップ)
• lg: 大 (残りのデスクトップ)

要素に複数の「col-」クラスを使用することで、さまざまな画面サイズでの動作を指定できます。たとえば、次のコードは、携帯電話では幅の半分を占める列を作成しますが、タブレットでは幅の 3 分の 1 しか占めません。

<div>

「col-*」クラスを理解すると、次のことが可能になります。 Bootstrap で柔軟で応答性の高いレイアウトを作成します。列の数とサイズを制御することで、さまざまなデバイス間で最適なユーザー エクスペリエンスを実現できます。

以上が「col-md-4」、「col-xs-1」、および「col-lg-2」はブートストラップ グリッド システムでどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。