引导粘性导航栏但不超过顶级内容

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>

这是一个带有标准轮播的导航栏。 问题是我想要一个始终保持在顶部的粘性导航栏。 但现在它与轮播重叠，所以我希望它从导航栏下方开始。我已经尝试添加 padding-top 等，但没有幸运我还尝试了处理较小分辨率的代码，并且无论我添加了多少填充，最​​终都会在两者之间产生大的空白。我的导航栏的高度似乎是 56 像素。

如果你对 Bootstrap 有一些基本的了解，我猜这很容易。

还有其他问题，如果您能提供帮助，我用数字标记这些问题。

1. 主页链接不会一直到顶部。有没有办法解决这个问题。

2. 您如何处理以使多个页面不会显示在一个页面上。有没有办法让 f.ex 具有显示高度的最小高度？

Answer 1

将此添加到您的 css 或从 https://bootswatch.com/ 下载 bootstrap.min.css

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

Answer 3

在非导航栏识别部分添加新类

<section id="home"  class="carousel slide not-navbar" data-ride="carousel"> </section>

为not-navbar 类添加CSS，默认高度Bootstrap 导航栏为50px（无填充）和70px（有填充）。 translateY(56px) 因为你的导航栏高度是56px。

.not-navbar {
  transform: translateY(56px);
}

因此，您的内容将正好位于导航栏下方，不会与您的顶部内容重叠。