Question

从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，导航功能就无法工作。

提前致谢。

Answer 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

希望它也可以解决您的问题。

Answer 2

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

从Bootstrap 3.3.7迁移到Bootstrap 4：页面底部的巨大空白区域

2 个答案: