Bootstrap グリッド レイアウトで列をラップする方法についての簡単な説明
この記事では、bootstrap の行折り返し問題について学び、グリッド列がどのように折り返されるかを説明します。皆さんのお役に立てれば幸いです。
1. グリッド レイアウトでの線の折り返しに関するよくある質問
前のセクションでは、グリッド ラインの折り返しに関する関連問題を多かれ少なかれ紹介しました。知識、コード内の関連するデモンストレーションもあります。改行の関連知識に習熟していないと、Web ページのレイアウトに大きなずれが生じやすいため、このレッスンでは改行を分けて詳しく説明します。または不可解な問題。また、以前お話しましたが、4列を2行に分割するなど、ほとんどの行はぴったりと収まりますが、3列や5列を2行に分割するなど、行が埋まっていない場合に問題が発生することがよくあります。 . 最後の行の表示方法に注意しないと、間違いやすくなります。 [関連する推奨事項: "bootstrap チュートリアル "]
グリッド改行に関するよくある質問:
改行すべき場所での行の折り返しがありません
行を折り返してはいけない場所での行折り返し
自動ワード折り返しの最後の行は混乱を招きます
2. 列の折り返し
2.1 .row-cols-*Usage
先ほど使用した row は単純な です。 <div class="row">、実際、row については、<code>row-cols-* クラスをさらに使用して、コンテンツを最適に表示できる列の数をすばやく設定し、レイアウト。通常の .col-* クラスは個々の列 (例: .col-md-4) に適用されますが、row-cols-* クラスは親 .row のショートカットとして設定されます。の。
.row-cols-* のアスタリスクには数字を使用できます。数字は幅ではなく、行に表示される列の数を表します。混同しないでください。通常の .col- ** と混同されています。 .row-cols-auto を使用して幅を調整することもできますが、この場合、レイアウトは制御不能になる可能性があります。
引き続きコードを使用して、次のことを示してみましょう。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>表示結果は次のとおりです。
3 を行に入れてみてください。 Cols-3 2、4、5、6 などに変更して効果を確認します。 もう 1 つの小さな驚きがあることに気づきましたか? 列幅のcol-を設定することによって、1 行に平均 5 列を表示することはできませんが、row-cols-5 を設定することでそれを実現できます。
2.2 .row-cols-*-*使用法
列の幅の設定と同様に、行数の設定もレスポンシブ デザインをサポートしています。詳細を示します。 使用法。row-cols-xs-1 のようなクラスがないことに注意してください。row-cols-1 を使用してください。これは、デフォルトで記述されていない場合は最小画面が最小画面であることを意味します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>レスポンシブエフェクトアニメーション
#2.3 超幅広改行
行内では、各セルに幅の値が設定されます。 , 行の残りの幅が次のセルを収容できない場合、自動的に折り返されます。この部分については「第 4 章 ブートストラップ Web ページのレイアウト グリッド システム」で詳細に説明およびデモを行っているので、ここでは詳しく説明しませんが、理解できない点がある場合は、第 4.2.4 章を参照してください。
2.4 強制行折り返し
Bootstrap では、各列の幅を変更せずに強制的に行折り返しを行うには、通常、複数の行を追加しますが、特定の列の後で行折り返しを強制する必要がある場合があります。このとき、行を折り返す必要がある場所に、幅 100%、高さ 0 の div を追加して、強制的に行を折り返すというちょっとしたトリックを使用できます。
<div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- 此处强制换行 --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>
本来は1行で表示されますが、2行で表示されます。
ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！
以上がBootstrap グリッド レイアウトで列をラップする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7328
9
1626
14
1350
46
1262
25
1209
29
Eclipseにブートストラップを導入する方法
Apr 05, 2024 am 02:30 AM
5 つのステップで Eclipse に Bootstrap を導入します。 Bootstrap ファイルをダウンロードして解凍します。 Bootstrap フォルダーをプロジェクトにインポートします。ブートストラップの依存関係を追加します。 Bootstrap CSS と JS を HTML ファイルにロードします。ブートストラップの使用を開始して、ユーザー インターフェイスを強化します。
アイデアをブートストラップに導入する方法
Apr 05, 2024 am 02:33 AM
IntelliJ IDEA に Bootstrap を導入する手順: 新しいプロジェクトを作成し、「Web アプリケーション」を選択します。 「Bootstrap」Maven 依存関係を追加します。 HTML ファイルを作成し、ブートストラップ参照を追加します。 Bootstrap CSS ファイルへの実際のパスに置き換えます。 HTML ファイルを実行してブートストラップ スタイルを使用します。ヒント: CDN を使用して、ブートストラップをインポートしたり、HTML ファイル テンプレートをカスタマイズしたりできます。
ブートストラップメディエーション効果テスト結果をstataで読み取る方法
Apr 05, 2024 am 01:48 AM
Stata でのブートストラップ媒介効果テストの解釈手順: 係数の符号を確認します: 媒介効果の正または負の方向を決定します。検定の p 値: 0.05 未満は、仲介効果が有意であることを示します。信頼区間を確認します。ゼロが含まれていない場合は、仲介効果が有意であることを示します。中央値の p 値を比較すると、0.05 未満であるため、仲介効果の重要性がさらに裏付けられます。
大型モデル間の1対1バトル75万ラウンド、GPT-4が優勝、Llama 3が5位にランクイン
Apr 23, 2024 pm 03:28 PM
Llama3 に関しては、新しいテスト結果が発表されました。大規模モデル評価コミュニティ LMSYS は、Llama3 が 5 位にランクされ、英語カテゴリでは GPT-4 と同率 1 位にランクされました。このリストは他のベンチマークとは異なり、モデル間の 1 対 1 の戦いに基づいており、ネットワーク全体の評価者が独自の提案とスコアを作成します。最終的に、Llama3 がリストの 5 位にランクされ、GPT-4 と Claude3 Super Cup Opus の 3 つの異なるバージョンが続きました。英国のシングルリストでは、Llama3 がクロードを追い抜き、GPT-4 と並びました。この結果について、Meta の主任科学者 LeCun 氏は非常に喜び、リツイートし、
ブートストラップを使用してメディエーション効果をテストする方法
Apr 05, 2024 am 03:57 AM
ブートストラップ テストは、リサンプリング テクノロジーを使用して統計テストの信頼性を評価し、媒介効果の有意性を証明するために使用されます。まず、直接効果、間接効果、および媒介効果の信頼区間を計算します。次に、統計的テストの有意性を計算します。 Baron and Kenny または Sobel 法に従った仲介タイプ、重要性、そして最後に自然な間接効果の信頼区間を推定します。
ブートストラップメディエーションテストの結果の見方
Apr 05, 2024 am 03:30 AM
ブートストラップ メディエーション テストは、データを複数回リサンプリングすることによってメディエーション効果を評価します: 間接効果信頼区間: メディエーション効果の推定範囲を示します。間隔にゼロが含まれない場合、効果は有意です。 p 値: 信頼区間にゼロが含まれない確率を評価し、0.05 未満の値が有意であることを示します。サンプル サイズ: 分析に使用されるデータ サンプルの数。ブートストラップ サブサンプリング時間: 繰り返されるサンプリングの数 (500 ～ 2000 回)。信頼区間にゼロが含まれず、p 値が 0.05 未満の場合、媒介効果は有意であり、媒介変数が独立変数と従属変数の間の関係を説明していることを示します。
ブートストラップとスプリングブートの違いは何ですか
Apr 05, 2024 am 04:00 AM
Bootstrap と Spring Boot の主な違いは次のとおりです。 Bootstrap は Web サイト スタイル用の軽量 CSS フレームワークであるのに対し、Spring Boot は Java Web アプリケーション開発用の強力なすぐに使用できるバックエンド フレームワークです。 Bootstrap は CSS と HTML に基づいていますが、Spring Boot は Java と Spring フレームワークに基づいています。 Bootstrap は Web サイトのルック アンド フィールの作成に重点を置いているのに対し、Spring Boot はバックエンド機能に重点を置いています。 Spring Boot を Bootstrap と統合して、完全に機能的で美しいものを作成できます。
ブートストラップ テスト メディエーション エフェクト stata コマンドの結果をエクスポートする方法
Apr 05, 2024 am 03:39 AM
Stata でのブートストラップ メディエーション効果テストの結果をエクスポートします。 結果を保存します。 ブートストラップ ポスト 変数リストを作成します。 ローカル変数: coef se ci 結果をエクスポートします (CSV): 区切り文字付きの結果をエクスポートします。csv, varlist(`vars') カンマ nolabel を置き換えます
