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

モバイル対応でレスポンシブな開発を迅速に行うために、Bootstrap には、コンテンツの表示、非表示、整列、間隔設定のための多数のユーティリティ クラスが含まれています。

変化display

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

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

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

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

マージンとパディング

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

トグルvisibility

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