끈적한 끈적한 navbar하지만 상단 콘텐츠 이상

Question

안녕하세요 제가 표준 부트 스트랩 코드의 종류를 사용하여 자습서 및 등 부트 스트랩 주위에 내 머리를 얻으려고. 그러나 나는 모든 곳에서 수색했으며 실제로 내 문제를 해결하는 코드를 찾을 수 없습니다.

<header> 
     <!-- Toggler/collapsible Button --> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <!-- Navbar links --> 
     <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-default fixed-top"> 
      <div class="container"> 
       <ul class="navbar-nav"> 
        <li class="nav-item active"> 
         <a class="nav-link" href="#home">Home</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#about">About Us</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    </header> 

    <section id="home" class="carousel slide" data-ride="carousel"> 
     <div id="container"> 

      <!-- Indicators --> 
      <ul class="carousel-indicators"> 
       <li data-target="#home" data-slide-to="0" class="active"></li> 
       <li data-target="#home" data-slide-to="1"></li> 
       <li data-target="#home" data-slide-to="2"></li> 
      </ul> 

      <!-- The slideshow --> 
      <div class="carousel-inner"> 
       <div class="carousel-item active"> 
        <img src="la.jpg" alt="Los Angeles"> 
        <div class="carousel-caption"> 
         <h3>Los Angeles</h3> 
         <p>We had such a great time in LA!</p> 
        </div> 
       </div> 
       <div class="carousel-item"> 
        <img src="chicago.jpg" alt="Chicago"> 
        <div class="carousel-caption"> 
         <h3>Chicago</h3> 
         <p>Thank you, Chicago!</p> 
        </div> 
       </div> 
       <div class="carousel-item"> 
        <img src="ny.jpg" alt="New York">  
        <div class="carousel-caption"> 
         <h3>New York</h3> 
         <p>We love the Big Apple!</p> 
        </div> 
       </div> 
      </div> 

      <!-- Left and right controls --> 
      <a class="carousel-control-prev" href="#home" data-slide="prev"> 
       <span class="carousel-control-prev-icon"></span> 
      </a> 
      <a class="carousel-control-next" href="#home" data-slide="next"> 
       <span class="carousel-control-next-icon"></span> 
      </a> 

     </div> 
    </section> 

아래의 표준 캐 러셀이있는 navbar입니다. 문제는 항상 위에 고정 된 끈적한 navbar를 원한다는 것입니다. 하지만 이제는 탐색기와 겹치므로 탐색 표시 아래에서 시작하고 싶습니다. 덧붙여서 padding-top을 추가해 보았습니다. 운이 좋지 않은 Ive에서도 더 작은 해상도를 처리하는 코드를 시도해 보았습니다. 추가 한 패딩이 얼마나 많은데도 큰 공백이 생겨 버렸습니다. 내 navbar는 높이가 56px 인 것 같습니다.

부트 스트랩에 대한 기본 지식이 있다면 쉽게 생각할 수 있습니다.

도움이 될만한 다른 질문이 있으면 숫자로 표시해 드리겠습니다.

2. 홈 링크가 맨 위로 이동하지 않습니다. 어쨌든이 문제를 해결할 수 있습니까?

3. 여러 페이지가 한 페이지에 나타나지 않도록 어떻게 처리합니까? f.ex에 최소 높이의 디스플레이 높이를 만들 수있는 방법이 있습니까?

Answer 1

당신이 시도 https://bootswatch.com/

1. for sticky navbar 
.fixed-top { 
position: fixed; 
top: 0; 
right: 0; 
left: 0; 
z-index: 1030; 
} 

2. 
<header id="top"> 
<a class="nav-link" href="#top">Home</a> 

Answer 2

#navbar { 
    overflow: hidden; 
    background-color: #333; 
} 

#navbar a { 
    float: left; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px; 
    text-decoration: none; 
} 

.content { 
    padding: 16px; 
} 

.sticky { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

.sticky + .content { 
    padding-top: 60px; 
}