목차
개요
이러한 유틸리티 클래스는 CSS float 속성을 사용하여 현재 뷰포트 크기에 따라 요소를 왼쪽 또는 오른쪽으로 플로팅하거나 플로팅을 비활성화합니다. 특이점 문제를 피하기 위해 ! important가 포함됩니다. 그리드 시스템과 동일한 뷰포트 중단점을 사용합니다. float 유틸리티는 플렉스 항목에 영향을 미치지 않습니다.
Float start on all viewport sizes
Float end on all viewport sizes
Don't float on all viewport sizes
<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 값에 대해 반응형 변형이 존재합니다.
Float start on viewports sized SM (small) or wider
Float start on viewports sized MD (medium) or wider
Float start on viewports sized LG (large) or wider
Float start on viewports sized XL (extra-large) or wider
<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
Sass
유틸리티 API
Float 유틸리티는 scss/_utilities.scss의 유틸리티 API에 선언되어 있습니다. Learn how to use the utilities API.
"float": (
responsive: true,
property: float,
values: (
start: left,
end: right,
none: none,
)
),