メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

横の配置ユーティリティ（Float） v4.0.0設定変更

レスポンシブなfloatユーティリティを使用して、任意のブレークポイントを超えて任意の要素のfloatを切り替える。

概要（Overview）

これらのユーティリティクラスは、CSSの float プロパティを使用して現在のビューポートサイズに基づいて水平方向の配置を左や右に寄せるか無効にする。特異性の問題を避けるために !important を組み込んでいる。これらはグリッドシステムと同じビューポート幅のブレークポイントを使用。floatユーティリティはFlexアイテムには影響しないので注意。

 

クラス（Classes）

クラスで配置を切り替え：

配置の種類 見やすいよう色と枠を付けています

●要素全体を左寄せ（.float-left）v4.0.0名称変更

左寄せ部分

●要素全体を右寄せ（.float-right）v4.0.0名称変更

右寄せ部分

●要素全体を動かさない（.float-none）v4.0.0追加

動かさない部分
設定例
<div class="float-right">...</div>

【設定】

  • 設定したい要素に .float-{side}（上記の「配置の種類」から選択）を入れる
    • {side} は、left（左）、right（右）、none（なし） のいずれかを選択

【注意】

【Bootstrap3.xとの変更箇所】

  • .float-none が追加
  • .pull-left ⇒ .float-left
  • .pull-right ⇒ .float-right

 

mixin（Mixins）

あるいはSass mixinを使用：

設定例
Sassでの設定.element {
	@include float-left;
}
.another-element {
	@include float-right;
}

 

レスポンシブ（Responsive）v4.0.0新設

定義済みクラスの種類 見やすいよう色と枠を付けています

●要素全体を左寄せ（float: left）

.float-left：全てのビューポートサイズで左寄せ
.float-sm-left：ビューポートサイズ小以上で左寄せ
.float-md-left：ビューポートサイズ中以上で左寄せ
.float-lg-left：ビューポートサイズ大以上で左寄せ
.float-xl-left：ビューポートサイズ特大以上で左寄せ

●要素全体を右寄せ（float: right）

.float-right：全てのビューポートサイズで右寄せ
.float-sm-right：ビューポートサイズ小以上で右寄せ
.float-md-right：ビューポートサイズ中以上で右寄せ
.float-lg-right：ビューポートサイズ大以上で右寄せ
.float-xl-right：ビューポートサイズ特大以上で右寄せ

●要素全体を動かさない（float: none）

.float-none：全てのビューポートサイズでnone
.float-sm-none：ビューポートサイズ小以上でnone
.float-md-none：ビューポートサイズ中以上でnone
.float-lg-none：ビューポートサイズ大以上でnone
.float-xl-none：ビューポートサイズ特大以上でnone
設定例
<div class="float-sm-right">...</div>

【設定】

  • 設定したい要素に .float(-{breakpoint})-{side}（上記の「定義済みクラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {side} は、left（左）、right（右）、none（なし） のいずれかを選択

ページ移動