从 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：页面底部巨大的空白区域
【发布时间】：2018-07-12 12:26:47
【问题描述】：

一旦我从 Bootstrap 3.3.7 迁移到 Bootstrap 4，就会出现以下问题：似乎差距的一部分是body标签

另一半来自html标签

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

这里是源代码的底部：

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

我不知道为什么要创建空间。

此外，当用户滚动页面时，页脚应该贴在屏幕底部。但是，一旦我们迁移到 Bootstrap v4，导航功能就不起作用了。

提前致谢。

【问题讨论】：

如果您希望得到任何合理的答案，您需要发布完整 code snippet（HTML、CSS 和 JavaScript，包括 CDN 链接），以便准确复制您的问题。否则，任何答案都将基于猜测，您希望避免这种情况。编辑您的问题并通过点击 "JavaScript/HTML/CSS sn-p" 图标在底部发布您的完整当前code snippet。

标签： html css asp.net-mvc twitter-bootstrap bootstrap-4

【解决方案1】：

因为我不知道你的大部分 HTML 代码，所以我无法有效地告诉你什么不起作用，但我在周末遇到了类似的问题，我找到了解决方案，我根据我的想法编辑了你的代码。喜欢：

<div class="container">
    <div class="row">
        <main>
            <div>
            </div>
            <div id="wrap" class="container body-content">
                @RenderBody()
            </div>
        </main>
    </div>

    <div class="row">
        <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>
    </div>
</div>
@Scripts.Render("~/bundles/js/app")
@RenderSection("Scripts", required: false)

你需要做什么来弥补这个巨大的差距？

您必须在容器中设置所有信息，然后为每个部分创建个人行。

我从这里得到了一个想法：

Bootstrap panel collapse creating gaps

希望它也能解决您的问题。

【讨论】：

【解决方案2】：

答案很简单。这是因为我们在 body 标签中添加了 60px 的内边距。如果我们删除它，问题就解决了。

【讨论】：