レイアウト用ユーティリティ

変化display

プロパティの一般的な値をすばやく切り替えるには、表示ユーティリティを使用しdisplayます。グリッド システム、コンテンツ、またはコンポーネントと組み合わせて、特定のビューポートで表示または非表示にします。

フレックスボックスのオプション

Bootstrap は flexbox で構築されていますが、すべての要素displayが変更されているわけではありませんdisplay: flex。これにより、多くの不要なオーバーライドが追加され、主要なブラウザの動作が予期せず変更される可能性があります。私たちのコンポーネントのほとんどは、フレックスボックスを有効にして構築されています。

display: flex要素に追加する必要がある場合は、.d-flexまたはレスポンシブ バリアントの 1 つ (例: .d-sm-flex) を使用して行います。このクラスまたは値は、サイズ変更、配置、間隔などのためにdisplay追加のフレックスボックス ユーティリティを使用できるようにするために必要です。

マージンとパディング

marginおよびpadding スペーシング ユーティリティを使用して、要素とコンポーネントの間隔とサイズを制御します。1remBootstrap には、値のデフォルト$spacer変数に基づいて、ユーティリティの間隔を設定するための 6 レベルのスケールが含まれています。すべてのビューポートの値を選択するか (例: .me-3in margin-right: 1remLTR)、レスポンシブ バリアントを選択して特定のビューポートをターゲットにします (例: .me-md-3in margin-right: 1remLTR- でmdブレークポイントから開始)。

トグルvisibility

切り替えdisplayが不要な場合は、可視性ユーティリティvisibilityを使用して要素を切り替えることができます。非表示の要素は引き続きページのレイアウトに影響を与えますが、訪問者には視覚的に隠されています。