내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
Check
새로운 버전의 Bootstrap을 사용할 수 있습니다!
// 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>

반응형

또한 각 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

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

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