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等没有幸运的我也尝试过处理较小分辨率的代码，无论我添加了多少填充，最终都会产生大的空白区域。我的导航栏高度似乎是56px。

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

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

首页链接不会一直到顶部。无论如何要解决这个问题。
如何处理，以便多个页面不会显示在一个页面上。有没有办法让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);
}

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

Bootstrap粘性导航栏但不是顶级内容

3 个答案: