You dont have javascript enabled! Please download Google Chrome!

Bootstrap 4 네비게이션 바(navbar) 상단 고정 시키기


글붕어 - 2018-08-12 - 0 개의 댓글

Bootstrap 4 네비게이션 바(navbar) 상단 고정


웹 개발 프레임워크인 부트스트랩의 최신 버전인 부트스트랩 4(Bootstrap 4)을 사용하면서 상단의 네비게이션 바(navbar)를 고정하려 하는데 이전 코드를 사용하게 되면 상단 고정이 동작하지 않는 것을 확인할 수 있습니다.

아래와 같이 기존 코드를 사용하려고 할 때 Bootstrap 4에서는 동작하지 않을 것입니다.

<nav class="navbar navbar-fixed-top">
  <!-- 네비게이션 바의 콘텐츠 -->
</nav>

 

Stack Overflow를 살펴보니 다음과 같은 응답이 있습니다.

bootstrap4_navbar_top

 

Bootstrap 4 부터는 .navbar-fixed-top 을 사용하지 않고 .fixed-top 을 사용한다고 합니다. 부트스트랩 4 공식 문서에도 다음 내용이 있었습니다.

http://getbootstrap.com/docs/4.1/components/navbar/#nav

bootstrap4_navbar_top_2

따라서 네비게이션 바를 상단에 고정하고 싶을 때는 다음과 같이 코드를 구성하면 됩니다.

<nav class="navbar fixed-top navbar-light bg-light">
  <!-- 네비게이션 바의 콘텐츠 -->
</nav>

 

 

이 글에 대해 어떻게 생각하시나요?
유용한 포스트였나요? 여러분의 의견을 하단의 Vote와 댓글로 남겨주세요 🙂
유용합니다!
아쉽습니다.

관련 포스트

댓글 달기

이메일은 공개되지 않습니다.

error: 경고: 콘텐츠가 보호되고 있습니다. 복사 및 무단 사용을 금지합니다.