从Bootstrap 3.3.7迁移到Bootstrap 4:页面底部的巨大空白 [英] Migrate from Bootstrap 3.3.7 to Bootstrap 4: huge blank space at the bottom of the page

问题描述

一旦我从Bootstrap 3.3.7迁移到Bootstrap 4，就会发生此问题: 差距的一部分似乎是由body标记形成的

Once I migrated from Bootstrap 3.3.7 to Bootstrap 4, this issue occurred: It seems a part of the gap is form the body tag

另一半来自html标记

页脚和页面底部之间似乎有很大的距离

It seems there are huge gap between the footer and the bottom of the page

这是源代码的底部:

   </div>
    <div id="wrap" class="container body-content">
        @RenderBody()
    </div>        
</main>
<nav id="bottomNav" class="navbar-fixed-bottom">
    <footer class="footer">
        <div class="footer-top">
        </div>
        <div class="footer-bottom">
            <div class="col-12 col-lg-8 footer-bar-left">
                <span>&copy; @DateTime.Now.Year</span>
            </div>
            <div class="col-12 col-lg-4 d-none">                       
            </div>
        </div>
    </footer>
</nav>     
@Scripts.Render("~/bundles/js/app")
@RenderSection("Scripts", required: false)

我不知道为什么要创建空格.

I have no idea why there are spaces created.

此外，当用户滚动页面时，页脚应停留在屏幕底部.但是，一旦我们迁移到Bootstrap v4，导航功能将无法使用.

What's more, the footer should stick to the screen bottom when user scrolls the pages. However, the nav function doesn't work, once we migrated to Bootstrap v4.

谢谢.

推荐答案

答案很简单.这是因为我们在body标签上添加了60px的填充.如果我们将其删除，则此问题已解决.

The answer is straightforward. It is because we added 60px padding to the body tag. If we removed it, the issue is resolved.

这篇关于从Bootstrap 3.3.7迁移到Bootstrap 4:页面底部的巨大空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！