맨 위 탐색 모음 페이지의 맨 위 내용

맨 위 탐색 모음 페이지의 맨 위 내용

이 트위터 부트스트랩 코드를 가지고 있습니다.

  <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>

그러나 페이지의 처음 부분을 볼 때, nav bar가 페이지 상단 부근에 있는 일부 콘텐츠를 차단하고 있습니다.페이지 상단을 볼 때 내용이 탐색 막대에 의해 차단되지 않도록 나머지 내용을 아래로 밀어내도록 하는 방법에 대한 아이디어가 있습니까?

반응성 부트스트랩을 사용하는 경우에는 그런 패딩을 추가하는 것으로는 충분하지 않습니다.이 경우 창 크기를 조정하면 페이지 상단과 탐색 막대 사이에 간격이 생깁니다.적절한 솔루션은 다음과 같습니다.

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

CSS에 추가:

body { 
    padding-top: 65px; 
}

부트스트랩 문서에서:

본체 상단에 패딩을 추가하지 않는 한, 고정된 탐색 막대는 다른 내용을 덮어씁니다.

부트스트랩 3의 경우, 클래스.navbar-static-top대신에navbar-fixed-topnavbar가 항상 표시되어야 하는 경우를 제외하고는 이 문제를 방지합니다.

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

첫 번째 '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);        
});

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

navbar가 2줄 또는 3줄로 접히는 경우를 해결합니다.{margin} 행 본문 뒤에 있는 bootstrap.css에 삽입할 수 있습니다.

저는 제 진짜 고정 내비바 바로 앞에 더미 고정 내비바를 만드는 데 성공했습니다.

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

모든 화면 크기에서 간격이 아주 잘 어울립니다.

부트스트랩 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" />

사용.percentage보다 훨씬 더 나은 해결책입니다.pixels.

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

필요한 경우 다른 것을 추가하여 명시적으로 표시할 수 있습니다.breakpoints에 의해 다른 답변에서 언급된 바와 같이.@spajus

navbar navbar-default를 사용하면 모든 것이 정상적으로 작동하지만 navbar-fixed-top을 사용하는 경우 사용자 지정 스타일 본문 {padding-top: 60fps;}을(를) 포함해야 합니다. 그렇지 않으면 아래 내용이 차단됩니다.

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

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 스타터 템플릿 cs는 다음을 사용합니다.

body {
  padding-top: 5rem;
}

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

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

이 코드는 jQuery(슬림 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동일합니다(단, 당신의e,navbar-brand은장큰다ne에서 가장 높은 입니다.navbar하지만 넌 쉽게 다른 요소를 대체할 수 있습니다.fixed-top나비 모양의

이 실패하는 2 가 에서 2 됩니다 하는 됩니다 에서 navbar-brand. 이것은 ⑤ A ⑥의 필요성을 입니다.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/ 은 화면 판독기가 포커스 모드에 있을 때 작동하지 않을 것이라고 표시하는 것 같습니다. 물론 실제로 작동하기 위해서는 화면 판독기가 필요한 유일한 시간입니다.

편집: 이 솔루션은 navbar-inverse 및 navbar-static-top 클래스를 사용할 수 없는 새로운 버전의 부트스트랩에서는 실행할 수 없습니다.

5를 하여 내 것을 css를 다음 행으로 이었습니다: 5의 Site.css의 Site.css의 Site.css의 Site.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">

당신은 추가해야 합니다.

#page {
  padding-top: 65px
}

끈적끈적한 발판이나 다른 것을 파괴하지 않는

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

원래 navbar 에 을 으로 합니다 으로 을 합니다 에 않으면 Δ Δ Δ Δ Δ 합니다.data-offset-topnavbar 에 의 으로 할 에 할 으로

, 은 를 .css다음과 같은 경우:

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

JS에 추가:

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

추가할 내용:

.navbar {
  position: relative;
}

을 사용할 수 ..stick-top 패딩cs을할때고를지한과는다g한hyotddg과odeocsfbee을nvvgper지때를

<div class="container-fluid mt-3">
  <nav class="navbar navbar-expand-sm bg-white navbar-light sticky-top pt-0">
    <a class="navbar-brand" href="/">
      <img src="/images/logo-full.png" alt="logo" width="150">
    </a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
    </ul>
  </nav>
  <div class="row">
     .....
  </div>
</div>

화면 해상도에 따라 마진을 설정할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page