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

Patricia Arquette

풀어 주다： 2024-11-21 04:00:12

원래의

533명이 탐색했습니다.

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

로그인 후 복사

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

body {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

로그인 후 복사

}

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

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

 본문 {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

로그인 후 복사

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