플로트

// Float

반응형 float 유틸리티를 사용하여 모든 중단점에서 모든 요소에서 float을 전환합니다.

개요

이러한 유틸리티 클래스는 CSS float 속성을 사용하여 현재 뷰포트 크기에 따라 요소를 왼쪽 또는 오른쪽으로 플로팅하거나 플로팅을 비활성화합니다. 특이점 문제를 피하기 위해 ! important가 포함됩니다. 그리드 시스템과 동일한 뷰포트 중단점을 사용합니다. float 유틸리티는 플렉스 항목에 영향을 미치지 않습니다.

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

html

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

Use the clearfix helper on a parent element to clear floats.

반응형

또한 각 float 값에 대해 반응형 변형이 존재합니다.

Float end on viewports sized SM (small) or wider

Float end on viewports sized MD (medium) or wider

Float end on viewports sized LG (large) or wider

Float end on viewports sized XL (extra large) or wider

Float end on viewports sized XXL (extra extra large) or wider

html

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra 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

CSS

Sass 유틸리티 API

플로트 유틸리티는 scss/_utilities.scss의 유틸리티 API에 선언되어 있습니다. 유틸리티 API 사용 방법에 대해 알아보세요.

scss/_utilities.scss

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