집 >웹 프론트엔드 >CSS 튜토리얼 >반응형 부트스트랩 디자인에서 고정 Navbar가 페이지 콘텐츠를 가리는 것을 방지하는 방법은 무엇입니까?

반응형 부트스트랩 디자인에서 고정 Navbar가 페이지 콘텐츠를 가리는 것을 방지하는 방법은 무엇입니까?

How to Prevent Fixed Navbars from Obscuring Page Content in Responsive Bootstrap Designs?

페이지 시작 시 Navbar로 인한 콘텐츠 방해 문제 해결

고정 Twitter Bootstrap navbar를 사용할 때 navbar가 상단의 페이지 콘텐츠를 가리는 문제에 직면하는 것이 일반적입니다. 이 문서에서는 이 문제를 해결하기 위한 솔루션을 제시합니다.

<div class='navbar navbar-fixed-top'></p>
<pre class="brush:php;toolbar:false"><div>

페이지에 간단한 패딩을 추가하는 것이 해결책처럼 보일 수 있습니다.

body {</p><pre class="brush:php;toolbar:false">padding-top: 60px;

}

이 접근 방식은 반응형 부트스트랩 디자인에 결함이 있습니다. 뷰포트의 크기를 조정할 때 페이지 상단과 탐색 모음 사이에 간격이 나타납니다.

올바른 해결 방법은 미디어 쿼리를 사용하여 화면 너비에 따라 페이지 패딩을 조정하는 것입니다.

 본문 {</p><pre class="brush:php;toolbar:false">padding-top: 60px;

}
@media(최대 너비: 979px) {

body {
    padding-top: 0px;
}

}

이것 수정하면 다양한 화면 크기에서 일관된 디자인을 유지하면서 페이지 콘텐츠가 탐색 모음에 의해 방해받지 않게 됩니다.

위 내용은 반응형 부트스트랩 디자인에서 고정 Navbar가 페이지 콘텐츠를 가리는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：