Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Float (フロート)

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

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,
      )
    ),