development

트위터 부트 스트랩 navbar 고정 상단 겹치는 사이트

big-blog 2020. 3. 4. 07:53
반응형

트위터 부트 스트랩 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>

비슷한 질문에 게시 한 것처럼 실제 고정 탐색 막대 바로 앞에 더미 고정되지 않은 탐색 막대를 만드는 데 성공했습니다.

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

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

이전의 모든 솔루션은 40 픽셀을 특정 방식으로 html 또는 CSS로 하드 코딩했습니다. 탐색 모음에 다른 글꼴 크기 나 이미지가 포함되어 있으면 어떻게됩니까? 바디 패딩을 처음 부터 엉망으로 만들지 않는 좋은 이유가 있다면 어떻게해야 합니까? 나는이 문제에 대한 해결책을 찾고 있었고 여기에 내가 찾은 것이 있습니다.

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

'1'을 조정하여 위 또는 아래로 이동할 수 있습니다. 크기 조정 전후에 탐색 표시 줄의 내용 크기에 관계없이 작동하는 것 같습니다.

다른 사람들이 이것에 대해 어떻게 생각하는지 궁금합니다. 생각을 나누십시오. (반복하지 않기로 리팩토링됩니다, btw.) jQuery를 사용하는 것 외에도 이런 식으로 문제에 접근하지 않는 다른 이유가 있습니까? 나는 다음과 같은 보조 navbar로 작업하고 있습니다.

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

추신 : 위의 부트 스트랩 2.3.2에 있습니다-3.x에서 작동합니까 일반 클래스 이름이 유지되는 한 실제로는 부트 스트랩과 독립적으로 작동해야합니까?

편집 : 다음은 동적 크기의 두 개의 반응 형 고정 고정 탐색 막대를 처리하는 완전한 jquery 함수입니다. user-top, admin-top 및 contentwrap : 3 개의 HTML 클래스가 필요합니다 (또는 ID를 사용할 수 있음).

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Bootstrap 4 솔루션은 모든 프로젝트에서 완벽하게 작동합니다.

첫 줄을 바꾸다

navbar-fixed-top

에

sticky-top

부트 스트랩 문서 참조

시간에 대해 그들은 이것을 올바르게했다 : D

메뉴 막대에서 줄 바꿈을 처리하려면 다음과 같이 탐색 막대에 ID를 적용하십시오.

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

다음과 같이 jquery를 포함시킨 후이 작은 스크립트를 머리에 추가하십시오.

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

이렇게하면 본체의 상단 패딩이 자동으로 조정됩니다.

Bootstrap 3. +의 경우 https://github.com/twbs/bootstrap/issues/1768에 따라 navbar-fixed-top 및 앵커 점프 겹침 문제를 해결하기 위해 다음 CSS를 사용합니다.

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

그냥 변경 fixed-top과 함께 sticky-top. 이 방법으로 패딩을 계산할 필요가 없습니다.
그리고 작동합니다 !!

당신이해야 할 일은 

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

이 클래스를 탐색 태그 안에 사용하십시오.

class = "navbar navbar-expand-lg navbar-light bg-light sticky-top "

부트 스트랩 4

Nick Bisby의 답변에 덧붙여 HAML을 레일에 사용 하여이 문제가 발생하고 여기에 Roberto Barros의 수정 사항을 적용한 경우 :

"bootstrap_and_overrides.css"의 요구 사항을 다음과 같이 대체했습니다.

= twitter-bootstrap-static / bootstrap.css.erb 필요

( https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 참조 )

... 다음과 같이 require 문 앞에 body CSS를 넣어야합니다 .

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

require 문이 본문 CSS 앞에 있으면 적용되지 않습니다.

나는 이것을 할 것이다 :

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

이렇게하면 탐색 블록이 다운 페이지를 늘리지 않고 페이지 내용을 덮어야합니다.

방금 navbar를 

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

공상적인 호 커스 pocus는 없지만 작동했습니다 ..

참고 URL : https://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site



반응형

'development' 카테고리의 다른 글

JSON 명명 규칙  (0) 2020.03.04
PHP : array_filter ()를 사용하여 배열 키를 필터링하는 방법?  (0) 2020.03.04
AsyncTask가 별도의 클래스이기 때문에 OnPostExecute () 결과를 주요 활동으로 가져 오는 방법은 무엇입니까?  (0) 2020.03.04
SQL Server Management Studio 및 Transact SQL에서 GO를 사용하는 것은 무엇입니까?  (0) 2020.03.04
목록에서 모든 값을 제거 하시겠습니까?  (0) 2020.03.04

'development'의 다른글

  • 현재글트위터 부트 스트랩 navbar 고정 상단 겹치는 사이트

관련글

댓글

티스토리툴바