Bootstrap 4 为什么主集装箱在导航台后面？_Bootstrap 4

Bootstrap 4 为什么主集装箱在导航台后面？

bootstrap-4

Bootstrap 4 为什么主集装箱在导航台后面？,bootstrap-4,Bootstrap 4,我想复制此初学者模板：我的index.html文件的内容： <!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>Bootstrap 4</title> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="w

我想复制此初学者模板：

我的index.html文件的内容：

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <title>Bootstrap 4</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                      <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                  </ul>
                  <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </div>
              </nav>

              <main role="main" class="container">

                <div class="starter-template">
                  <h1>Bootstrap starter template</h1>
                  <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
                </div>

              </main><!-- /.container -->

    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</body>

</html>


引导程序4










搜寻
引导启动程序模板
将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档

当我检查自己的index.html文件时，它看起来与示例中有点不同（文本不居中，您无法看到引导启动程序模板，尽管它存在于html中），尽管我复制了相同的代码。更确切地说，我的主要部分在导航后面，而不是下面，如示例链接中所示：

我提到，没有添加任何会影响该主要部分的自定义样式

我遗漏了什么？

在前面提到的示例模板中，body标签顶部有一个5em的填充。请试试看

body {
    padding-top: 5rem;
}

固定顶

将元素从边到边放置在视口顶部。确保您了解项目中固定位置的影响；您可能需要添加其他CSS。-

固定顶部

从内容的正常流程中删除您使用它的

元素

，因此

元素

将覆盖其他内容

要解决此问题，您需要按下

main

内容，使其等于或大于

fixed top

元素的高度。可以通过将

主体的填充顶部
设置为等于或大于固定顶部元素的高度
来执行此操作。例如，如果固定顶部元件的高度
为72px
，则车身顶部的衬垫至少应为72px
。如果愿意，可以使用相对单位：填充顶部：4.5rem而不是填充顶部：72px

正文{
填充顶部：72px；
}











搜寻
引导启动程序模板
将此文档用作快速启动任何新项目的一种方式。
您得到的只是此文本和一个基本上没有内容的HTML文档