时间戳

首页 > 解决方案 > 使用 Laravel 使用 Bootstrap 4 类创建粘性页脚

laravel - 使用 Laravel 使用 Bootstrap 4 类创建粘性页脚

问题描述

我想使用 Laravel 6 和 Bootstrap 4 创建一个粘性页脚。我尝试创建它但失败了。这些是我的文件：

布局.blade.php：

<body>
    @auth
        @include('../inc/navbar')
    @endauth
    <div class="container" id="app">
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
        @yield('content')
    </div>
    @auth
        @include('../inc/footer')
    @endauth
</body>

页脚.blade.php：

<nav class="navbar fixed-bottom bg-custom justify-content-end">
    <b>Powered by Me</b>
</nav>

应用程序.scss

body {
    background-color: rgb(241, 230, 131);
  }

nav {
    height: 50px;
    background-color: rgb(131, 215, 241);
}

我尝试使用 fixed-bottom 类，但通过这种方式，即使用户滚动包含大量内容的页面，页脚也始终保持在屏幕底部的相同位置。有人能帮我吗？

标签： laravelbootstrap-4sticky-footer

解决方案

根据文档，标记应如下所示。请参见此处的示例。下面示例中的mt-auto类 ( ) 将元素粘贴到页面底部。margin-top:auto

您已经添加了不需要的nav和类，尽管如果您愿意的话，您可能可以使用 来实现它。fixed-bottomfixed-bottom

<footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

如果您仍然遇到问题，请确保您的标记经过验证，以确保您没有错误的 html

推荐阅读