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

Question

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

layout.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>

footer.blade.php:

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

app.scss

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

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

我尝试使用固定底部 class 但这样即使用户滚动包含大量内容的页面，页脚也始终保持在屏幕底部的相同位置。有人可以帮助我吗？

Answer 1

根据文档，标记应如下所示。 See example here。下面示例中的 mt-auto class (margin-top:auto) 将元素粘贴到页面底部。

您已经添加了 nav 和 fixed-bottom class 这两个不是必需的，尽管如果您愿意，您可能可以使用 fixed-bottom 来实现它.

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

如果您仍然遇到问题，make sure your markup validates 以确保您没有故障 html

Answer 2

看下面的代码！ 2020 年快乐！

   //style
        body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
       }

       main {
          padding-top: 100px;
       }

       footer {
           margin: auto auto 0 auto;
       }


      //html
        <html>
          <body>
             <header>
               <nav>..</nav>
             </header>
             <main>
               <p>Lorem ipsum dolor sit amet!</p>
             </main>
             <footer></footer>
          </body>
        </html>

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

create a sticky footer with Bootstrap 4 classes using Laravel

laravel

bootstrap-4

sticky-footer

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

create a sticky footer with Bootstrap 4 classes using Laravel

laravel

bootstrap-4

sticky-footer

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