Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Float (フロート)

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

目次

Overview

これらのユーティリティクラスは、CSS float プロパティ を使用して、現在のビューポートサイズに基づいて要素を左右にフロートしたり、無効にしたりします。重要! これらはグリッドシステムと同じビューポートブレークポイントを使用しています。float ユーティリティはフレックスアイテムには影響しないことに注意してください。

Float left on all viewport sizes

Float right on all viewport sizes

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

Responsive

float にはレスポンシブユーティリティがあります。

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

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

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

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