Twitter Bootstrap에서 Navbar 차단 웹 사이트 콘텐츠를 수정하는 방법은 무엇입니까?

Navbar가 웹 사이트 콘텐츠를 차단

이 문제는 Twitter Bootstrap의 상단 고정 navbar를 사용할 때 발생합니다. 처음에는 사용자가 페이지 상단을 볼 때 탐색 모음에 의해 콘텐츠가 가려지는 것을 볼 수 있습니다. 이 문제를 해결하고 콘텐츠가 차단되는 것을 방지하려면 다음 솔루션을 구현할 수 있습니다.

응답에서 제안한 대로 단순히 패딩을 추가하여 콘텐츠를 아래로 밀어내는 것만으로는 반응형 Bootstrap 프레임워크에 충분하지 않습니다. 브라우저 창 크기를 조정할 때 페이지 상단과 탐색 모음 사이에 간격이 나타날 수 있습니다.

따라서 보다 포괄적인 접근 방식이 권장됩니다.

body {
  padding-top: 60px;
}

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

이 CSS 코드는 60px 상단 패딩을 추가합니다. 본문에 효과적으로 기본 콘텐츠를 탐색 모음 아래로 밀어 넣습니다. 그러나 모바일 또는 작은 화면 크기(화면 너비 979px 미만)의 경우 겹치는 문제를 방지하기 위해 상단 패딩이 제거됩니다.

이 솔루션을 구현하면 사용자는 탐색 표시줄이 화면 상단에 고정된 상태로 유지되도록 할 수 있습니다. 페이지를 표시하지만 더 이상 근처 콘텐츠 시청 환경을 방해하지 않습니다.

위 내용은 Twitter Bootstrap에서 Navbar 차단 웹 사이트 콘텐츠를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!