뜨다

반응형 부동 유틸리티를 사용하여 중단점에 걸쳐 모든 요소에서 부동을 토글합니다.

이 페이지에서

개요

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

모든 뷰포트 크기에서 부동 시작

모든 뷰포트 크기에서 플로트 엔드

모든 뷰포트 크기에서 부동하지 마십시오.

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>

반응형

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

SM(작음) 또는 더 넓은 크기의 뷰포트에서 부동 시작

크기가 MD(중간) 이상인 뷰포트에서 부동 시작

크기가 LG(대) 이상인 뷰포트에서 부동 시작

XL(초대형) 또는 더 넓은 크기의 뷰포트에서 부동 시작

HTML

<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

사스

유틸리티 API

Float 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

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