Bootstrap에서 Navbar가 페이지 콘텐츠를 가리는 것을 어떻게 방지할 수 있습니까?

페이지 내용을 가리는 Navbar: 솔루션

Bootstrap의 상단 탐색 모음(

)은 탐색 옵션을 제공하는 편리한 방법입니다. 페이지 상단. 그러나 특정 시나리오에서는 페이지 상단 근처에 있는 필수 콘텐츠를 차단할 수 있습니다.

이 문제를 해결하려면 패딩 전략 구현을 고려하세요.

body {
  padding-top: 60px;
}

이 패딩은 콘텐츠를 아래로 내리면 콘텐츠를 가리지 않고 탐색 모음이 위에 떠 있을 수 있습니다. 그러나 이 접근 방식은 작은 화면에서 볼 때 페이지 상단에 공백이 생길 수 있습니다.

이를 방지하려면 미디어 쿼리를 사용하여 화면 너비에 따라 패딩을 조정하세요.

@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

이렇게 하면 더 좁은 화면에서 패딩이 제거되어 불필요한 공백이 제거됩니다. 이 솔루션을 구현하면 기능적인 탐색 모음을 유지하면서 중요한 페이지 콘텐츠를 원활하게 표시할 수 있습니다.

위 내용은 Bootstrap에서 Navbar가 페이지 콘텐츠를 가리는 것을 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!