フロート

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

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

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

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

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

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

• 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"

• 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"

• コンテナ

• グリッドシステム

• カラム

• ガター

• CSS Grid

• ディスプレイ

• フレックス

• ポジション

• Hero Row

• Position

• Stack Group