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

  <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에 삽입 될 수 있습니다. }

부트 스트랩 v4 스타터 템플릿 CSS 는 다음을 사용합니다.

body {
  padding-top: 5rem;
}

Twitter 의이 예제 에서 볼 수 있듯이 반응 형 스타일 선언이 포함 된 행 앞에 이것을 추가하십시오.

<style> 
    body {
        padding-top: 60px;
    }
</style>

이렇게 :

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

와 네비게이션 바 네비게이션 바 기본 다 잘 작동하지만, 당신이 사용하는 경우 메뉴 바 고정 정상을 사용자 정의 스타일 본체 포함 할 필요가 {패딩 탑 : 60 픽셀을} 그렇지 않으면 컨텐츠 아래를 차단합니다.

여기서 두 가지 문제가 발생합니다.

1. 페이지로드 (콘텐츠 숨김)
2. 이와 같은 내부 링크는 맨 위로 스크롤되고 탐색 표시 줄에 의해 숨겨집니다.

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

내부 페이지 링크가있는 부트 스트랩 4

1)을 수정하기 위해 Martijn Burger가 위에서 말했듯이 부트 스트랩 v4 스타터 템플릿 CSS는 다음을 사용합니다.

body {
  padding-top: 5rem;
}

2) 이 문제를 확인하십시오 . 이 코드는 대부분 작동하지만 동일한 해시의 두 번째 클릭에는 작동하지 않습니다.

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

이 코드는 jQuery (slim jQuery 아님)를 사용하여 A 링크에 애니메이션을 적용합니다.

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

지금까지 내가 찾은 최고의 솔루션은 하드 코딩 높이와 중단 점이 포함되지 않은 <nav...태그에 태그를 추가하는 것 입니다.

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

이 방법으로 @media중단 점을 동일하게 설정하면 높이가 동일합니다 (단 navbar-brand, 키가 가장 큰 객체 navbar이지만 비 fixed-top네비게이션 바의 다른 요소를 쉽게 대체 할 수 있습니다) .

이것이 실패한 곳은 이제 스크린 리더로 2 가지 navbar-brand요소를 제시 합니다. 이는 not-for-sr해당 요소가 화면 판독기에 표시되지 않도록 하는 클래스가 필요함을 나타냅니다 . 그러나 해당 클래스는 존재하지 않습니다 https://getbootstrap.com/docs/4.0/utilities/screenreaders/

나는 함께 화면 판독기 문제를 보상하기 위해 노력했습니다 aria-hidden="true"하지만 https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/는 화면 판독기가있는 경우이 아마 작동하지 않습니다 표시하는 것 초점 모드에서 실제로 작동하는 데 필요한 유일한 시간입니다 ...

사용 percentage하는 것보다 훨씬 더 나은 솔루션 pixels입니다.

body {
  padding-top: 10%; //This works regardless of display size.
}

필요한 경우 breakpoints다른 답변에서 언급 한 것처럼 다르게 추가하여 명시 적으로 나타낼 수 있습니다.@spajus

편집 : navbar-inverse 및 navbar-static-top 클래스를 사용할 수없는 최신 버전의 Bootstrap에는이 솔루션을 사용할 수 없습니다.

MVC 5를 사용하여 수정 한 방식은 다음 줄과 함께 내 Site.css를 추가하는 것입니다. body{padding: 0}

_Layout.cshtml의 시작 부분에서 코드를 다음과 같이 변경했습니다.

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

<div class='navbar' data-spy="affix" data-offset-top="0">

탐색 표시 줄이 원래 페이지 맨 위에 있으면 값을 0으로 설정하십시오. 그렇지 않으면 data-offset-top탐색 표시 줄 위의 컨텐츠 값으로 값을 설정하십시오 .

한편 다음 css과 같이 수정해야합니다 .

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

이거 추가 해봐:

.navbar {
  position: relative;
}

당신은 추가해야합니다

#page {
  padding-top: 65px
}

끈적 끈적한 바닥 글이나 다른 것을 파괴하지 않기 위해

JS에 추가하십시오.

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

화면 해상도에 따라 여백을 설정할 수 있습니다

@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;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}