내 사이트에서 부트 스트랩을 사용하고 있으며 탐색 바 고정 상단에 문제가 있습니다. 일반 탐색 메뉴를 사용하면 모든 것이 정상입니다. 그러나 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로 만듭니다 (부트 스트랩의 문서에 따르면 간격이 생성되는 휴대 전화 레이아웃 컷오프입니다)
body { padding-top: 40px; }로 충분
참고로 훨씬 편리한 솔루션으로 모든 프로젝트에서 완벽하게 작동합니다.
첫 줄을 바꾸다
.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);
}); parseInt높이의 CSS 값 을 사용 하는 대신 방금을 사용 $('#main-navbar').height()했지만 그렇지 않으면 매우 유용하고 문제를 해결했습니다. 감사합니다.
문제는 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>간격은 모든 화면 크기에서 잘 작동합니다.
Bootstrap 4 솔루션은 모든 프로젝트에서 완벽하게 작동합니다.
첫 줄을 바꾸다
navbar-fixed-top에
sticky-top시간에 대해 그들은 이것을 올바르게했다 : D
이전의 모든 솔루션은 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'
});
});그냥 변경 fixed-top과 함께 sticky-top. 이 방법으로 패딩을 계산할 필요가 없습니다.
그리고 작동합니다 !!
Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.- 참조 getbootstrap.com/docs/4.5/components/navbar/#placement
메뉴 막대에서 줄 바꿈을 처리하려면 다음과 같이 탐색 막대에 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;
}이 클래스를 탐색 태그 안에 사용하십시오.
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.erbrequire 문이 본문 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는 없지만 작동했습니다 ..
nav-? ??나타내는가?