Source

뜨다

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

개요

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

클래스

부동 소수점을 클래스로 토글:

모든 뷰포트 크기에서 왼쪽으로 부동

모든 뷰포트 크기에서 오른쪽으로 부동

모든 뷰포트 크기에서 부동하지 마십시오. 
<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>

믹신

또는 Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

반응형

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

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

크기가 MD(중간) 이상인 뷰포트에서 왼쪽으로 부동

크기가 LG(대형) 이상인 뷰포트에서 왼쪽으로 부동

XL(초대형) 또는 더 넓은 크기의 뷰포트에서 왼쪽으로 부동 

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

다음은 모든 지원 클래스입니다.

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none