使用Laravel创建带有引导4类的粘性页脚_Laravel_Bootstrap 4_Sticky Footer

使用Laravel创建带有引导4类的粘性页脚

laravel bootstrap-4

使用Laravel创建带有引导4类的粘性页脚,laravel,bootstrap-4,sticky-footer,Laravel,Bootstrap 4,Sticky Footer,我想用Laravel6和Bootstrap4创建一个粘性页脚。我试图创建它，但失败了。这些是我的文件： layout.blade.php: <body> @auth @include('../inc/navbar') @endauth <div class="container" id="app"> <form id="logout-form" action="{{ route('logout') }}" m

我想用Laravel6和Bootstrap4创建一个粘性页脚。我试图创建它，但失败了。这些是我的文件：

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>

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

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

根据文档，标记应该如下所示。下面示例中的

mt auto

类（

margin top:auto

）将元素粘贴到页面底部

您已经添加了

nav

和

fixed-bottom

这两个不需要的类，不过如果您愿意，您可能可以使用

fixed-bottom

来实现

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


在此处放置粘性页脚内容。

如果您仍然有问题，请确保没有错误的html，请参阅下面的代码！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>

//风格
身体{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
主要{
填充顶部：100px；
}
页脚{
保证金：自动0自动；
}
//html
..
Lorem ipsum dolor sit amet

无需添加您自己的CSS，这是默认引导样式的一部分。

   //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>