コンテンツ
b。align-items-centerが中央に配置されます
a、justify-content-start左端＆justify-content-center居中＆justify-content-end右端
a。.offsetクラスは、列列に対してオフセット処理を実行します
ガイド：大画面ケースリファレンス
YYDatavの大画面データ視覚化「SummaryofWonderfulCases」（PythonとEchartsのソースコード）-YYDataVのブログ-CSDNブログ
1.列の配置
1.垂直方向の配置
a、align-items-スタートトップ
<div class="container" style="border: 5px red solid">
<div class="row align-items-start" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
1
</div>
<div class="col" style="border: 5px green solid">
2
</div>
<div class="col" style="border: 5px green solid">
3
</div>
<div class="col" style="border: 5px green solid">
4
</div>
</div>
</div>b。align-items-centerが中央に配置されます
<div class="container" style="border: 5px red solid">
<div class="row align-items-center" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
column 1
</div>
<div class="col" style="border: 5px green solid">
column 2
</div>
<div class="col" style="border: 5px green solid">
column 3
</div>
<div class="col" style="border: 5px green solid">
column 4
</div>
</div>
</div>c、align-items-endbottom
<div class="container" style="border: 5px red solid">
<div class="row align-items-end" style="margin:5px; padding:5px; height:50%; border: 5px blue solid">
<div class="col" style="border: 5px green solid">
column 1
</div>
<div class="col" style="border: 5px green solid">
column 2
</div>
<div class="col" style="border: 5px green solid">
column 3
</div>
<div class="col" style="border: 5px green solid">
column 4
</div>
</div>
</div>2.水平方向の配置
a、justify-content-start左端＆justify-content-center居中＆justify-content-end右端
<div class="container" style="border: 5px red solid">
<div class="row justify-content-start" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 1 start
</div>
<div class="col-4" style="border: 5px green solid">
column 2 start
</div>
</div>
<div class="row justify-content-center" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 3 center
</div>
<div class="col-4" style="border: 5px green solid">
column 4 center
</div>
</div>
<div class="row justify-content-end" style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
column 5 end
</div>
<div class="col-4" style="border: 5px green solid">
column 6 end
</div>
</div>
</div>b、列の折り返し列の折り返し
1行に12を超える列が配置されている場合、追加の各列セットは1つの単位として新しい行にラップされます。
この例では、4つの列すべてが1行に配置されていますが、col-4とcol-9は12列より大きいため、col-9を次の新しい行に変更します。同様に、col-9と3番目のcol-4は次のようになります。また、12列を超えるため、col-4も次の新しい行に折り返されます。
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-9" style="border: 5px green solid">
col-9
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>c、列は列のブレークポイントを壊します
通常は3列-4がちょうど1行ですが、ここでは列ブレークポイントw-100を追加することで、指定した列位置で切り捨てて新しい行を開く機能を実現しています。
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>2.列の並べ替え
1.列の並べ替え
a、.order-x クラス（xは0、1、2、3、4、5）
.order-x クラスを使用して 、コンテンツの表示順序を制御します。表示順序は、ブレークポイント.order-1または.order-md-2によって制御できます。.order-xクラスは、6つのグリッド（0,1,2,3,4,5）をサポートします。
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 order-3" style="border: 5px green solid">
col-1
</div>
<div class="col-4 order-2" style="border: 5px green solid">
col-2
</div>
<div class="col-4 order-1" style="border: 5px green solid">
col-3
</div>
<div class="col-4 order-0" style="border: 5px green solid">
col-4
</div>
</div>
</div>b、最初の 注文-最後の注文
ソートでは、order -firstクラスと order-last クラスの両方がサポートさ れています。
2.列オフセットオフセット列
グリッド列をオフセットするには、.offsetクラスとmarginの2つの方法があります。
a。.offsetクラスは、列列に対してオフセット処理を実行します
offset-md-4を使用して、最初の列を4列右にシフトしていることがわかります。
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 offset-md-4" style="border: 5px green solid">
col-1
</div>
<div class="col-4" style="border: 5px green solid">
col-2
</div>
<div class="col-4" style="border: 5px green solid">
col-3
</div>
<div class="col-4" style="border: 5px green solid">
col-4
</div>
</div>
</div>b、ms-auto me-auto
<div class="container" style="border: 5px red solid">
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 ms-auto" style="border: 5px green solid">
col-1
</div>
<div class="col-4 ms-auto" style="border: 5px green solid">
col-2
</div>
</div>
<div class="row " style="margin:5px; padding:5px; height:20%; border: 5px blue solid">
<div class="col-4 ms-auto" style="border: 5px green solid">
col-3
</div>
<div class="col-4 me-auto" style="border: 5px green solid">
col-4
</div>
</div>
</div>3.独立カラムスタンドアロンカラム
列は独立して使用できますが、必ずしも行の直接の子として使用する必要はありません。
<div class="container" style="border: 5px red solid; height: 50%;">
<div class="col-3" style="border: 5px green solid">
col-1
</div>
<div class="col-9 " style="border: 5px green solid">
col-2
</div>
</div>