Question

最近，我一直在尝试进入Bootstrap4。我知道Bootstrap默认提供导航，正文和页脚等布局，并且随着时间的推移已经开发出来，以实现更好的外观。我在Bootstrap上找到了一些示例，并且可以在我的网页上使用sticky footer（而不是固定的页脚）。由于某种原因，我无法使其正常工作。

This是我尝试过的：

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

/* Custom page CSS
-------------------------------------------------- */

/* Not required for template or sticky footer method. */

main>.container {
  padding: 60px 15px 0;
}

.footer>.container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-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>
</header>

<!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container">
    <h1 class="mt-5">Sticky footer with fixed navbar</h1>
    <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p>
    <p>Back to <a href="https://getbootstrap.com/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
  </div>
</main>

<footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

我缺少给定示例页面的哪些代码？在我的示例中找到的页脚行为与在示例页面中找到的页脚行为不同，因为当我添加多个元素（例如，添加十个段落元素）时，可能会注意到页脚如何不像发现的那样“粘”在example page中。

如何使用Bootstrap 4中的粘性页脚？

0 个答案: