ブートストラップでコンポーネントの位置を調整する方法

Bootstrap は、コンポーネントの位置を調整するさまざまな方法を提供します。 Offset クラス: コンポーネントを水平にオフセットします。補助クラス: コンポーネントの位置合わせを調整します。グリッド システム: コンポーネントがグリッド内で占める列の数を制御します。インライン要素: フローティング レイアウトを作成します。絶対配置: コンポーネントを通常のフローから移動し、ページ上の任意の場所に配置します。

Bootstrap コンポーネントの位置の調整

Bootstrap は、コンポーネントの位置を調整して柔軟で柔軟なコンポーネントを作成するためのさまざまな方法を提供します。レスポンシブレイアウト。

Offset クラス

コンポーネントを水平方向にオフセットするには、.offset-* クラスを使用できます。たとえば、.offset-md-2 は、中画面ではコンポーネントを 2 列右にオフセットします。

補助クラス

Bootstrap には、コンポーネントの位置を調整するために使用できる次のような補助クラスがいくつかあります。 ##.pull -left

および

.pull-right
• : コンポーネントを左または右に揃えます。 .text-center: コンポーネントを中央揃えにします。
• .text-justify: コンポーネントの両端を揃えます。
• グリッド システム

Bootstrap のグリッド システムを使用すると、複雑なレイアウトを作成し、コンポーネントの配置を正確に制御できます。 .col-* クラスを使用すると、ラスター内でコンポーネントが占める列の数を指定できます。

インライン要素

Bootstrap のインライン要素クラス (.inline-block など) を使用すると、フローティング レイアウトを作成できます。これは、コンポーネントをインライン要素として設定し、マージンまたはパディングを使用して配置することで実現できます。

絶対配置

絶対配置は、コンポーネントを通常のフローから移動し、ページの場所の任意の場所に配置できる、より高度な方法です。これは、.position-absolute クラスと、

top

、bottom、left、および right## を使用することで実現できます。 ＃ プロパティ 。 例

ブートストラップを使用してコンポーネントの位置を調整する例をいくつか示します:

.col-md- 6.offset -md-3

: 中画面で幅 6 列、右にオフセット 3 列のテキスト ブロックを作成します。

• .text-center.pull-left: ページの左側に配置される中央揃えのタイトルを作成します。
• .inline-block.ml-2: インライン要素のブロックを作成し、左に 2 ユニット埋め込みます。
• .position-absolute.top-0.right-0: ページの右上隅に絶対位置するポップアップ ウィンドウを作成します。

以上がブートストラップでコンポーネントの位置を調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。