ブートストラップの Col-SM Col-MD の違い

ブートストラップフェンスシステムCSSにおけるcol-xs-*、col-sm-*、col-md-*の意味は、表示画面の幅に応じて対応するクラススタイルを自動的に選択することです。

.col-xs- 超小型画面携帯電話 (<768px) (推奨学習: Bootstrap ビデオ チュートリアル )

.col-sm- 小型画面タブレット (≥768px)

.col-md- 中画面デスクトップ モニター (≥992px)

#.col-lg- 大画面大型デスクトップモニター (≥1200px)

まず、

1、col- について説明します。 column;

2. xs-maxsmall、extra small; sm-small、small; md-medium、medium; lg-large、large;

3. -* は列を占有することを意味します。は、各行 12 列グリッド システム比率を自動的に占有します;

4、col-xs-*超小型画面携帯電話 (<768px)、

.col-sm -*小型画面タブレット (≥768px),

.col-md-*中画面デスクトップ モニター (≥992px) (グリッド パラメーター).

5. この画面のどこにいても、グリッド システムは各行を 12 列に自動的に分割します。col-xs-*、col-sm-*、col-md-* に続くパラメータは、それぞれが占める列の数を表します。現在の画面の div 。

例:

画面上のこの div の位置は次のとおりです: .col-xs-6 は、ウルトラ- small screen 画面の半分 (12/6 列 = 2 div) であり、.col-md-3 はミッドレーン画面の 3 列または 1/4 (12/3 列 = 4 div) を占めます。

6. 逆に、小さい画面に 3 つの div を並べて表示したい場合 (12/3 = それぞれ 4 列を占有)、col-xs-4; 大きい画面の div に 6 を表示します ( 12/6 = それぞれ 2 列を占めます)、次に、col-md-2; このようにして、必要なレイアウトを制御できます。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップの Col-SM Col-MD の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

bootstrap

ソース：php.cn

前の記事：ブートストラップ削除システムを理解する方法 次の記事：thinkphp とブートストラップの違い

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• win10 1809は安定していますか？
  2020-01-15 11:18:13
• Win10 は .Net Framework 3.5 sp1 をインストールします
  2020-01-15 10:58:09
• win10で外部ネットワークに接続する方法
  2020-01-15 10:34:39
• win10を1909にアップデートするのにどれくらい時間がかかりますか？
  2020-01-15 10:16:56
• win10のアップデートにどれくらい時間がかかりますか
  2020-09-14 10:58:08
• win10のゲームクラッシュを修正する方法
  2020-01-15 09:58:52
• win10 Bluetooth ヘッドセットのマイクが機能しない
  2020-01-15 09:36:25
• win10にウイルス対策ソフトをインストールする必要はありますか？
  2020-01-15 09:28:34
• 期限切れのwin10ライセンスをアクティベートする方法
  2020-01-15 09:22:01
• win10のリセットでキーボードレイアウトがスタックする問題の解決策
  2020-01-15 09:09:20

最新の問題

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...

から 2024-04-06 20:22:15

0

1

454

CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...

から 2024-04-06 12:53:11

0

1

376

Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...

から 2024-04-05 08:45:39

0

1

3443

Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...

から 2024-04-04 22:16:18

0

1

1450

関連トピック

詳細>

• wordpress seo
• 配列の長さを取得するjsメソッド
• Binanceでビットコインを売買する方法
• 小紅書は何をしますか？
• jsイベントバブリングはどのような問題を解決できますか?
• 文字列をインターセプトするjsメソッド
• Linuxのネットワークカード再起動コマンド
• phpとjavaの違いは何ですか