Float (フロート)

レスポンシブなフロートを使用して、ブレークポイントを越えて要素のフロートをコントロールします。

On this page

Overview

これらのユーティリティクラスは、CSS float プロパティを使用して、現在のビューポートサイズに基づいて要素を左右にフロートしたり、無効にします。

重要! これらは Grid システムと同じビューポートブレークポイントを使用しています。float utilities は Flex アイテムには影響しないことに注意してください。

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Responsive

float にはレスポンシブ utilities があります。

Float start on viewports sized SM (small) or wider

Float start on viewports sized MD (medium) or wider

Float start on viewports sized LG (large) or wider

Float start on viewports sized XL (extra-large) or wider

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

サポートしているクラスは以下の通りです。

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Utilities API

Float utilities は utilities API scss/_utilities.scss で宣言されています。 Learn how to use the utilities API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),