태그 보관물: html

html

트위터 부트 스트랩 navbar 고정 상단 겹치는 사이트 navbar가없고 navbar가 겹치는 것처럼 위로

내 사이트에서 부트 스트랩을 사용하고 있으며 탐색 바 고정 상단에 문제가 있습니다. 일반 탐색 메뉴를 사용하면 모든 것이 정상입니다. 그러나 navbar fixed top으로 전환하려고하면 사이트의 다른 모든 콘텐츠가 navbar가없고 navbar가 겹치는 것처럼 위로 이동합니다. 다음은 기본적으로 내가 배치 한 방법입니다.

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

부트 스트랩 예제를 정확하게 복사하려고했지만 navbar fixed top을 사용할 때만이 문제가 발생합니다. 내가 뭘 잘못하고 있죠?

답변

당신의 대답은 문서에 옳습니다 .

바디 패딩 필요

추가하지 않는 고정 메뉴 바는 다른 내용을 오버레이됩니다 padding의 정상에 <body>. 자신의 가치를 시험하거나 아래의 스 니펫을 사용하십시오. 팁 : 기본적으로 탐색 모음의 높이는 50 픽셀입니다.

body { padding-top: 70px; }

이를 반드시 확인 후 핵심 부트 스트랩 CSS.

과의 부트 스트랩 4 문서 …

고정 탐색 막대는 position : fixed를 사용합니다. 즉, DOM의 일반적인 흐름에서 가져오고 다른 요소와 겹치지 않도록 사용자 정의 CSS (예 : 패딩 탑)가 필요할 수 있습니다.

답변

다른 사람들이 말했듯이 신체에 패딩 탑을 추가하는 것이 좋습니다. 그러나 화면을 더 좁게 만들면 (휴대폰 너비까지) 탐색 표시 줄과 본문 사이에 간격이 있습니다. 또한 붐비는 탐색 모음을 여러 줄 바로 줄 바꿈하여 일부 내용을 다시 덮어 쓸 수 있습니다.

이것은 나를 위해 이런 종류의 문제를 해결했습니다.

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

이것은 기본적으로 40px 패딩을 768px 너비 미만에서 0px로 만듭니다 (부트 스트랩의 문서에 따르면 간격이 생성되는 휴대 전화 레이아웃 컷오프입니다)

답변

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

첫 줄을 바꾸다

.navbar.navbar-fixed-top

에

.navbar.navbar-default.navbar-static-top

답변

이 문제는 알려져 있으며 트위터 부트 스트랩 사이트에 해결 방법이 있습니다.

탐색 표시 줄을 부착 할 때는 아래의 숨겨진 영역을 고려해야합니다. 에 40px 이상의 패딩을 추가하십시오 <body>. 핵심 Bootstrap CSS 이후 및 선택적 반응 형 CSS 전에 이것을 추가하십시오.

이것은 나를 위해 일했다 :

body { padding-top: 40px; }

답변

@Ryan, 맞습니다. 높이를 하드 코딩하면 사용자 정의 탐색 표시 줄의 경우 작동하지 않을 수 있습니다. 이것은 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);
});

답변

수확량 컨테이너 앞에 이것을 넣습니다.

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

이 접근 방식은 해킹을 작동시키는 데 필요한 해킹을 문서화하고 모바일 탐색에서도 작동하기 때문에 좋아합니다.

편집-이것은 훨씬 잘 작동합니다.

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

답변

문제는 navbar-fixed-top과 관련이 있으며 본문 패딩을 지정하지 않으면 콘텐츠가 오버레이됩니다. 여기에 제공된 솔루션은 100 % 경우에 작동하지 않습니다. 페이지가로드 된 후 JQuery 솔루션이 페이지를 깜박이거나 이동합니다. 이상하게 보입니다.

나를위한 진정한 해결책은 navbar-fixed-top을 사용하는 것이 아니라 navbar-static-top을 사용하는 것입니다.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>