Vuetify

ショップ

企業向け

レスポンシブ フロート ユーティリティを使用して、任意のブレークポイントにカスタム フロートを適用します。

Float ユーティリティ クラスは CSS float property を使用して、現在のビューポート サイズに基づいてフローティングを適用します。

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

クラスでフロートを簡単に切り替えます:

フロートは、ブレークポイント(ビューポート)ごとに適用することもできます。

利用可能なすべてのサポート クラスの一覧を次に示します:

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none
Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!