[css] 페이지의 상단 내용을 차단하는 상단 탐색 모음

Program / 글쓴이

이 트위터 부트 스트랩 코드가 있습니다 

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

그러나 페이지의 시작 부분을 볼 때 탐색 모음이 페이지 상단에있는 일부 내용을 차단합니다. 탐색 모음에 의해 콘텐츠가 차단되지 않도록 페이지 상단을 볼 때 나머지 콘텐츠를 아래로 내리는 방법에 대한 아이디어가 있습니까?

답변

CSS에 추가하십시오.

body {
    padding-top: 65px;
}

로부터 부트 스트랩 문서 :

본문 상단에 패딩을 추가하지 않는 한 고정 탐색 메뉴가 다른 컨텐츠를 오버레이합니다.

답변

반응 형 부트 스트랩을 사용하는 경우 이와 같은 패딩을 추가하는 것만으로는 충분하지 않습니다. 이 경우 창의 크기를 조정하면 페이지 상단과 탐색 모음 사이에 간격이 생깁니다. 적절한 해결책은 다음과 같습니다.

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

답변

부트 스트랩 3의 경우 항상 탐색 표시 줄이 필요하지 않으면 클래스 navbar-static-top대신 navbar-fixed-top이 문제 를 방지합니다.

답변

참고로 훨씬 편리한 솔루션으로 모든 프로젝트에서 완벽하게 작동합니다.

첫 번째 ‘div’를 다음에서 변경하십시오.

<div class='navbar navbar-fixed-top'>

에

<div class="navbar navbar-default navbar-static-top">

답변

이 문제를 해결하기 위해 jQuery를 사용하고 있습니다. 다음은 BS 3.0.0의 스 니펫입니다.

$(window).resize(function () {
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () {
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

답변

실제 고정 탐색 막대 바로 앞에 더미 고정되지 않은 탐색 막대를 만드는 데 성공했습니다.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

간격은 모든 화면 크기에서 잘 작동합니다.

답변

MVC 5 튜토리얼 에서 파생 된 프로젝트에서 바디 패딩을 변경해도 아무런 영향이 없음을 알았습니다. 다음은 나를 위해 일했습니다.

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

탐색 표시 줄이 2 ~ 3 줄로 접히는 경우를 해결합니다. 이것은 라인 본문 {margin : 0; 이후의 bootstrap.css에 삽입 될 수 있습니다. }