`fixed-top`

Question

我想要复制此初始模板：http://getbootstrap.com/docs/4.1/examples/starter-template/

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

当我检查自己的index.html文件时，它看起来有点不同（文本没有居中，你看不到Bootstrap启动器模板，即使它存在于HTML中）也不是示例，甚至虽然我复制了相同的代码。更准确地说，我的主要部分是导航后面而不是下面，如示例链接：

我提到没有添加影响可能影响该主要部分的自定义样式。

我错过了什么？

Answer 1

`fixed-top`

将元素从边缘定位到视口顶部。 确保您了解项目中固定位置的后果;您可能需要添加其他CSS 。 - bootstrap-4

fixed-top从正常的内容流中移除您使用它的element，因此element将覆盖其他内容

要解决此问题，您需要按下main内容等于或大于fixed-top元素的高度。您可以通过将padding-top的{{1}}设置为等于或大于body来实现。例如，如果fixed-top element's height为fixed-top element's height，则正文的填充顶部应至少为72px。如果您愿意，可以使用72px单位：relative代替padding-top: 4.5rem;。

padding-top: 72px;

body {
  padding-top: 72px;
}

这是bootstrap-3和bootstrap-4所做的事情。我建议你自己检查一下。

更新

您可能会发现这两个链接很有用。

Answer 2

在提到的示例模板中，body标签的填充顶部为5em。请尝试给它。

StackNavigator

为什么导航器背后的主要容器？

2 个答案:

`fixed-top`

更新