위치

요소의 위치를 빠르게 구성하려면 이러한 도우미를 사용하십시오.

이 페이지에서

고정 상단

가장자리에서 가장자리로 뷰포트 상단에 요소를 배치합니다. 프로젝트에서 고정 위치의 결과를 이해해야 합니다. CSS를 추가해야 할 수도 있습니다.

<div class="fixed-top">...</div>

고정 바닥

가장자리에서 가장자리로 뷰포트 하단에 요소를 배치합니다. 프로젝트에서 고정 위치의 결과를 이해해야 합니다. CSS를 추가해야 할 수도 있습니다.

<div class="fixed-bottom">...</div>

스티키 탑

가장자리에서 가장자리로 뷰포트 상단에 요소를 배치하되, 스크롤한 후에만 요소를 배치합니다. 이 유틸리티는 모든 브라우저에서 완전히 지원되지 않는 .sticky-topCSS 를 사용합니다.position: sticky

<div class="sticky-top">...</div>

반응형 끈적끈적한 탑

.sticky-top유용성 을 위해 반응 변형도 존재 합니다.

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>